预先将图片的url保存在ing 的 data-src属性之中，通过js判断图片是否在浏览器的窗口之中，如果在便将data-src的值赋给src.
这两部分比较简单，直接上代码：
<!DOCTYPE html> <html> <head> <title>图片懒加载</title> <meta charset="utf-8"> <style> ul{ margin:0; padding: 0; list-style: none; } ul li{ width: 500px; height: 309px; } ul li img{ width: 100%; height: 100%; } </style> </head> <body> <ul id="pictures"> <li> <img src="image/1.jpg" alt="" data-src="image/1.jpg"> </li> <li> <img src="" alt="" data-src="image/2.jpg"> </li> <li> <img src="" alt="" data-src="image/3.jpg"> </li> <li> <img src="" alt="" data-src="image/4.jpg"> </li> <li> <img src="" alt="" data-src="image/5.jpg"> </li> </ul> </body> </html>如何判别图片是否在可视区是关键，由于浏览器窗口大小有限，一般无法显示整个HTML页面，所以页面大致被分为三个部分：处于浏览器窗口上面的部分（即被遮挡的部分），处于可视窗口内（即我们能看到的部分），处于浏览器窗口下面的部分（还未出现的部分）。 先介绍几个函数： 1、offsetTop：返回本元素上边框与父元素边框之间的距离，这里的父元素指的是非static定位元素(static定位即默认定位)。如果父元素（这里其实说祖先元素更合适），均为static定位，那么则返回和body的距离。 2、documentElemet.scrollTop:返回页面的顶部scroll的长度，即页面上部被遮挡的长度。 3、window.innerHeight:返回浏览器窗口的长度。 由于CSS部分均未设置定位,此时img.offsetTop即返回到body的距离，即到HTML页面顶部的距离。 因此只要img.offsetTop>scrollTop（即大于页面上部被遮挡的部分的长度），并且img.offsetTop<scrollTop+window.innerHeight（即图片还未处于页面下部被隐藏的部分），那么图片便全部或者部分出现在浏览器窗口之中。
const pictures=document.getElementById("pictures"); var len=pictures.children.length; var timer=null; window.addEventListener('scroll',function() { if(timer) { clearInterval(timer); } timer=setInterval(()=>{ lazyloading(); },300) }); function lazyloading() { for(var i=0;i<len;i++) { var scrollTop=document.documentElement.scrollTop; var height=window.innerHeight; var offsetTop=pictures.children[i].offsetTop; if(offsetTop>=scrollTop&&offsetTop<scrollTop+height) { var img=pictures.children[i].firstElementChild; if(img.getAttribute("src")!==img.getAttribute("data-src")) { img.setAttribute("src",img.getAttribute("data-src")); } } } lazyloading()上面的代码在window监听器中设置了定时器timer来延缓图片加载的时间，既可以更清楚的展现懒加载的效果，还能减少函数调用的频率。 本人小白一个，也是参考了这位大佬的博客！大家多多支持原作者！点击此处前往
