您的位置: 首页  >  IT文章  >  图片懒加载

图片懒加载

分类: IT文章 • 2025-01-28 17:25:58

什么是图片懒加载

懒加载也叫延迟加载，即在需要的时候进行加载，随用随载

在单页面应用中，如果没有引用懒加载，运用webpack打包后的文件将会异常的大，
造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，
运用懒加载可以将页面进行划分，按需加载页面，可以分担首页所承担的加载压力，减少加载用时

定义


懒加载就是优先加载可视区域的内容，其他部分等进入了可视区域在加载。

为什么使用图片懒加载


 全部加载用户体验差
一次性全部加载浪费用户流量，也许只是访问部分内容，不是全部内容都能够访问完，全部加载的话，就有点浪费流量了。

作用


减少或延迟请求数，缓解浏览器的压力，增强用户体验。

实现方式


设置图片src属性为同一张图片，同时自定义一个data-src属性来存储图片的真实地址
页面初始化显示的时候或者浏览器发生滚动的时候判断图片是否在可视区域内
当图片在可视区域内时，通过js自动改变该区域的图片的src属性为真实地址

HTML代码

<!DOCTYPE html>
<html>
<head>
  <title>Demo-Lazyload</title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <style>
    img {
      height: 500px;
       500px;
      display: block;
      background: url(images/loading.gif) no-repeat center;
      margin: 0 auto
    }

    #lazy {
       800px;
      margin: 0 auto
    }
  </style>
</head>

<body>
  <div >
    <!--<img data-src="真实图片地址" src="小图片地址"/>-->
    <img data-src="images/1.jpg" src="images/1.png" />
    <img data-src="images/2.jpg" src="images/2.png" />
    <img data-src="images/3.jpg" src="images/3.png" />
    <img data-src="images/4.jpg" src="images/4.png" />
    <img data-src="images/5.png" src="images/5.png" />
    <img data-src="images/6.jpg" src="images/6.png" />
  </div>
  <script src="js/lazyload.js"></script>
  <script type="text/javascript">
    var lazyloading = lazyload({
      id: "lazy",
      lazyTime: 200,
      lazyRange: 100
    });
  </script>
</body>

</html>

JS代码

function lazyload(options) {
	var doc = options.id ? document.getElementById(options.id) : document;
	if (doc === null) return;
	var tmp = doc.getElementsByTagName('img'),
	tmplen = tmp.length,
	imgobj = [];

	for (var i = 0; i<tmplen; i++) {
		var _tmpobj = tmp[i];
                  //getAttribute:获取指定属性名的属性值
		if (_tmpobj.getAttribute('data-src') !== null) {
			if (isLoad(_tmpobj)) {
				setimg(_tmpobj);
			} else {
				imgobj.push(_tmpobj);
			}
		}
	}
	var len = imgobj.length;
	function handler() {
		for (var i = 0,
		end = len; i < end; i++) {
			var obj = imgobj[i];
			if (isLoad(obj)) {
				_setimg(obj);
				imgobj.splice(i, 1);
				len--;
				if(len===0){loadstop()}
			}
		}
	}
	function isLoad(ele) {
                //scrollTop: 元素的顶部到视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么他的scrollTop值为0 。
                //pageYOffset:它会返回文档当前沿垂直轴（即向上或者向下）滚动的像素数。
                //clientHeight:元素的高（不包括边框）padding+height，可以理解为元素可视区域的高度。
		var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
		if(typeof ele==='undefined') return false;
		var edit = ~~ele.getAttribute("data-range") || options.lazyRange;
		var clientHeight = scrollTop + document.documentElement.clientHeight + edit;
		var offsetTop = 0;
                //tagName:返回元素的标签名   HTML 返回tagName属性值是大写的
                //offsetParent: 是距离调用offsetParent的元素最近的，已经进行过css定位的容器属性。
                //如果没有定位，则取body元素的应用。元素的style设置为display：none时，offsetParent属性返回null
                //offsetTop:获取对象相对于由offsetParent属性指定的父坐标距离顶端的高度   
		while(ele.tagName.toUpperCase() !== 'BODY'){
        		offsetTop += ele.offsetTop;
        		ele = ele.offsetParent;
        	}
		return (clientHeight > offsetTop);
	}
	function _setimg(ele) {
		if (options.lazyTime) {
			setTimeout(function() {
				setimg(ele);
			},
			options.lazyTime + ~~ele.getAttribute('data-time'))
		} else {
			setimg(ele);
		}
	}
	function setimg(ele) {
		ele.src = ele.getAttribute('data-src');
	}
	function loadstop(){
         //detachEvent:不是w3c标准，通常为了适用于ie浏览器，谷歌、open也能使用，和removeEventListener作用基本相同，必须配合attachEvent使用。
	window.removeEventListener ? window.removeEventListener("scroll", handler, false) : window.detachEvent("onscroll", handler);
	}
    loadstop();
	window.addEventListener ? window.addEventListener("scroll", handler, false) : window.attachEvent("onscroll", handler);
}

相关推荐