在图片非常多的应用场景，为了提高页面加载速度，改善用户体验，我们对未出现在视野范围内的图片先不进行加载，等到出现在视野范围才去加载。 图片懒加载 懒加载是前端优化的一种有效方式，极大的提升用户体验，图片一直是页面加载的流浪大户，现在一张图片几兆已经是很正常的事，远远大于代码的大小。倘若一次ajax请求过来10张图片的地址，我想如果你一次性把10张图片都加载出来，肯定是不合理的。 第一：会显示的很慢，多加载1秒都会引起用户的流失，这对靠流量的网站来说绝对是噩梦。 第二：用户如果只是随便看看，没想全部看，这无疑是浪费了用户很多流量。 图片懒加载 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> * { margin: 0; padding: 0; } ul { width: 810px; border: 1px solid yellow; margin: 0 auto; /*overflow: hidden;*/ } li { list-style-type: none; width: 180px; height: 255px; border: 1px solid aqua; float: left; margin: 10px; } img { width: 100%; height: 100%; } </style> <script type="text/javascript"> window.onload = function () { var oImg = document.getElementsByTagName('img'); window.onscroll = function () { //获取滚轮的高度 var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; //获取可视区的高度 var top = document.documentElement.clientHeight; //获取可视区底部的高度 var bottom = scrollTop + top; for (var i = 0; i < oImg.length; i++) { //拿到每一个图片到他定位父级之间的距离 var imgTop= oImg[i].offsetTop; var _src = oImg[i].getAttribute('_src'); if (imgTop <= bottom) { oImg[i].src = _src; } } } } </script> </head> <body> <ul id="ul"> <li><img _src="image/1.jpg"></li> <li><img _src="image/2.jpg"></li> <li><img _src="image/3.jpg"></li> <li><img _src="image/4.jpg"></li> <li><img _src="image/5.jpg"></li> <li><img _src="image/6.jpg"></li> <li><img _src="image/7.jpg"></li> <li><img _src="image/8.jpg"></li> <li><img _src="image/9.jpg"></li> <li><img _src="image/10.jpg"></li> <!--<li><img _src="……省略多张图片"></li>--> </ul> </body> </html> JavaScript懒加载示例什么是懒加载
为什么要懒加载
懒加载代码示例：
