js实现懒加载

最新推荐文章于 2023-10-12 19:07:31 发布

原创最新推荐文章于 2023-10-12 19:07:31 发布 · 2.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

页面效果实现专栏收录该内容

3 篇文章

订阅专栏

原理

页面显示图片是由于浏览器是否发起请求，请求图片的src属性，因此将一个小的加载图片放到页面当中，当图片进入到可视区域，再给src赋值，未进入前不给src赋值，这样浏览器将不会发起请求

思路

加载loading图片(为了避免重复执行赋值操作，因为图片加载过将不会再加载，可以对图片设置一个类名，当加载过了，让类名为空)
判断哪些图片需要加载
隐形加载图片
替换真图片（如今见到的显示图片都是慢慢显现出来的，因此可以加一个过渡效果）

实现

html代码

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		img {
			opacity: 0;
			transition: all 1s linear;
		}
		.current {
			opacity: 1;
		}
	</style>
</head>

<body>
	<img src="./icon/O1CN01sdQRAo1abQiWtZpKz_!!6000000003348-0-octopus.jpg"
		data-src="./icon/O1CN01kotcXe29YEVObhi37_!!6000000008079-0-octopus.jpg" class="lazyloading">
	<img src="./icon/O1CN01sdQRAo1abQiWtZpKz_!!6000000003348-0-octopus.jpg"
		data-src="./icon/O1CN01kotcXe29YEVObhi37_!!6000000008079-0-octopus.jpg" class="lazyloading">
	<img src="./icon/O1CN01sdQRAo1abQiWtZpKz_!!6000000003348-0-octopus.jpg"
		data-src="./icon/O1CN01kotcXe29YEVObhi37_!!6000000008079-0-octopus.jpg" class="lazyloading">
	<img src="./icon/O1CN01sdQRAo1abQiWtZpKz_!!6000000003348-0-octopus.jpg"
		data-src="./icon/O1CN01kotcXe29YEVObhi37_!!6000000008079-0-octopus.jpg" class="lazyloading">
	<img src="./icon/O1CN01sdQRAo1abQiWtZpKz_!!6000000003348-0-octopus.jpg"
		data-src="./icon/O1CN01kotcXe29YEVObhi37_!!6000000008079-0-octopus.jpg" class="lazyloading">
	<img src="./icon/O1CN01sdQRAo1abQiWtZpKz_!!6000000003348-0-octopus.jpg"
		data-src="./icon/O1CN01kotcXe29YEVObhi37_!!6000000008079-0-octopus.jpg" class="lazyloading">
	<img src="./icon/O1CN01sdQRAo1abQiWtZpKz_!!6000000003348-0-octopus.jpg"
		data-src="./icon/O1CN01kotcXe29YEVObhi37_!!6000000008079-0-octopus.jpg" class="lazyloading">
	<img src="./icon/O1CN01sdQRAo1abQiWtZpKz_!!6000000003348-0-octopus.jpg"
		data-src="./icon/O1CN01kotcXe29YEVObhi37_!!6000000008079-0-octopus.jpg" class="lazyloading">
	<img src="./icon/O1CN01sdQRAo1abQiWtZpKz_!!6000000003348-0-octopus.jpg"
		data-src="./icon/O1CN01kotcXe29YEVObhi37_!!6000000008079-0-octopus.jpg" class="lazyloading">
	<img src="./icon/O1CN01sdQRAo1abQiWtZpKz_!!6000000003348-0-octopus.jpg"
		data-src="./icon/O1CN01kotcXe29YEVObhi37_!!6000000008079-0-octopus.jpg" class="lazyloading">

js代码

window.onload=function(){
	//获取图片列表俩种加载图片1、如下代码 2、var imgs=document.querySelectorAll('.lazyloading')此处要不断获取应当放置于lazyload函数中
	//var imgs=document.querySelectorAll("img")
	//获取图片距顶部的距离
	function getTop(e){
		return e.offsetTop
	}
	//判断图片是否处于可视区
	function lazyLoad(){
		// 获取图片列表，即img标签列表
		var imgs = document.querySelectorAll('.lazyloading');
		//可视区高度
		var h=window.innerHeight
		//页面被卷去的高度
		var s=document.body.scrollTop
		//对图片进行懒加载
		for(var i=0;i<imgs.length;i++){
			//判断图片是否在可视区内
			if(getTop(img[i])<(h+s)){
				//由于定时器是一个异步任务，则需要一个立即执行函数，若没有i的值会为图片列表长度
				(function(ii){
					//由于页面真实效果会有一段等待时间，则需要一个定时器定时0.5秒
					setTimeout(function(){
						var temp=new Image()
						//隐形加载图片
						temp.src=img[ii].getAttribute('data-src')
						//onload判断图片是否加载完毕，真实图片加载完毕，再对图片src赋值						
						temp.onload=function(){
							//用方法二加载图片的话代码如下：img[ii].className=''
							img[ii].src=temp.src;
							//让图片显现，有过渡效果慢慢显现并且标记已经加载过了
							imgs[i].className='current'
						}
					}，500)
				})(i)
			}
		}
	}
	lazyload()
	//滚动函数，由于滚屏事件会触发很多次，因此可以设置节流来减少滚动函数次数
	window.onscroll=function(){
		lazyload()
	}
}