纯JS 10分钟 实现图片懒惰加载
知识点:
1:h5 新增选择器 document.querySelectorAll
2:JS 经典,防抖
3:距离判断:getBoundingClientRect
思路:通过浏览器滚动事件, 判断图片高度是否出现在可视化范围。 如果ok 赋值图片地址src(默认是空 通常地址隐藏在data-src 中),
网上其他实现思路也是同理,实现方式不一样。
复制code保存xx.html:可直接运行看效果
code:
代码已标注详细解释 ,
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE htm> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> /*消除css默认的间距 方便控制*/ * { margin: 0; padding:0 } li { height:800px; list-style:none; /* https://www.jianshu.com/p/e2eb0d8c9de6 */ box-sizing: border-box; border:1px solid #000000 } img { display: block; margin:100px auto; } </style> </head> <body> <div> <ul class="box"> <li> <img data-src="img/1.jpg" /></li> <li> <img data-src="img/2.jpg" /></li> <li> <img data-src="img/3.jpg" /></li> <li> <img data-src="img/4.jpg" /></li> </ul> </div> <script> //闭包 (function() { var dom = { //h5 新增选择器 ImgAll: document.querySelectorAll("img") }, method = { /** * window.innerHeight 获取页面的高度不包括工具栏和滚动条 * 获取图片地址:dom.ImgAll[i].dataset.src * getBoundingClientRect().top 获取到图片到页面顶部的高度 */ imgOnload: function () { //这里可以在细节优化 比如已经加载的图片 判断 src 已经存在 不赋值 //或者 赋值完后 在dom.Img 集合里面删除当前元素 for (let i = 0; i < dom.ImgAll.length; i++) { if (dom.ImgAll[i].getBoundingClientRect().top < window.innerHeight) { dom.ImgAll[i].src = dom.ImgAll[i].dataset.src; } } }, /** * 防抖 * 详细介绍 https://blog.csdn.net/crystal6918/article/details/62236730 * https://www.2cto.com/kf/201803/728456.html */ scollImg: function(fn) { let handle; return function() { let context = this; let args = arguments; // 取消之前的延时调用 clearTimeout(handle); handle = setTimeout(function () { //apply 改变当前的this 是运行时的context 除暴理解移花接木 此处imgOnload 然并若 //http://www.cnblogs.com/onepixel/p/5143863.html 或者阮一峰 博客 js 目录。 fn.apply(context, arguments); }, 500); } } }; window.onload = method.imgOnload(); //滚动事件 window.onscroll = method.scollImg(method.imgOnload); })(); </script> </body> </html>
图片缓存 查看 js个人笔记 renderCvs方法