图片懒加载的实现

最新推荐文章于 2024-05-30 17:38:42 发布

z逍遥

最新推荐文章于 2024-05-30 17:38:42 发布

阅读量217

点赞数

分类专栏：小知识总结

本文链接：https://blog.csdn.net/zyq51/article/details/108477260

版权

小知识总结专栏收录该内容

15 篇文章 1 订阅

订阅专栏

一、懒加载实现的原理

用一句话来说： 懒加载就是延迟加载是优化页面效果的一种手段，即通过控制图片内的src属性的现实或隐藏来实现的！

如图：在这里插入图片描述

在这里插入图片描述
总的来说就是：当图片距离顶部的距离top-height等于可视区域h和滚动区域高度s之和时说明图片马上就要进入可视区了，就是说当top-height<=s+h时，图片在可视区是使片加载。

二、实现代码

实现懒加载有四个步骤，如下：
1.加载loading图片
2.判断哪些图片要加载【重点】
3.隐形加载图片
4.替换真图片

html

<!DOCTYPE html>
<html>

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

   #lazy {
     width: 800px;
     margin: 0 auto
   }
   .box{
     position: relative;
   }
 </style>
</head>

<body>
 <div id="lazy">
   <img data-src="images/1.jpg" src="images/pixel.gif" />
   <img data-src="images/2.jpg" src="images/pixel.gif" />
   <img data-src="images/3.jpg" src="images/pixel.gif" />
   <img data-src="images/4.jpg" src="images/pixel.gif" />
   <img data-src="images/5.png" src="images/pixel.gif" />
   <img data-src="images/6.jpg" src="images/pixel.gif" />
   
   <!--<img data-src="真实图片地址" src="小图片地址"/>
   <img data-src="真实图片地址" src="小图片地址"/>-->

 </div>
 <script src="js/lazyload.js"></script>
 <script type="text/javascript">
   var lazyloading = lazyload({
     id: "lazy",
     lazyTime: 100,
     lazyRange: 100
   });
   // let div = document.querySelector("#div")
   // console.log(div.offsetParent)
 </script>
</body>

</html>

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];
  	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) {
  	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;

  	while (ele.tagName.toUpperCase() !== 'BODY') {
  		offsetTop += ele.offsetTop;
  		ele = ele.offsetParent;
  		 //重点在这儿，这是累加的操作，若是图片存在定位，则累加offsetTop（图片到顶部的距离）
  	}

  	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) {
  	console.log(ele.src)
  	ele.src = ele.getAttribute('data-src');
  }

  function loadstop() {
  	// 删除使用 EventTarget.addEventListener() 方法添加的事件。
  	window.removeEventListener ? window.removeEventListener("scroll", handler, false) : window.detachEvent("onscroll", handler);
  }
  loadstop();
  window.addEventListener ? window.addEventListener("scroll", handler, false) : window.attachEvent("onscroll", handler);
}		}

z逍遥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
图片懒加载的实现

一、懒加载实现的原理用一句话来说：懒加载就是延迟加载是优化页面效果的一种手段，即通过控制图片内的src属性的现实或隐藏来实现的！如图：总的来说就是：当图片距离顶部的距离top-height等于可视区域h和滚动区域高度s之和时说明图片马上就要进入可视区了，就是说当top-height<=s+h时，图片在可视区是使片加载。二、实现代码实现懒加载有四个步骤，如下：1.加载loading图片2.判断哪些图片要加载【重点】3.隐形加载图片4.替换真图片html<!DOCTYP
复制链接

扫一扫

专栏目录