<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <title>lazyLoad</title> <!-- 参考网址 https://segmentfault.com/a/1190000003881643 --> <style type="text/css" media="all"> * { margin: 0; padding: 0; } #div1 { width: 520px; margin: 30px auto; border: 1px solid red; overflow: hidden; } li { width: 160px; height: 160px; float: left; list-style: none; margin: 5px; background: url(loading.gif) center center no-repeat; border: 1px dashed green; } img{ width:100% } </style> </head> <body> <div id="div1"> <ul> <li data-src="http://4493bz.1985t.com/uploads/allimg/140710/1-140G0161612.jpg"></li> <li data-src="http://4493bz.1985t.com/uploads/allimg/140628/1-14062Q33R6.jpg"></li> <li data-src="http://4493bz.1985t.com/uploads/allimg/140628/1-14062Q33242.jpg"></li> <li data-src="http://img.bizhi.sogou.com/images/2014/12/10/997251.jpg"></li> <li data-src="http://dl.bizhi.sogou.com/images/2014/12/02/986640.jpg"></li> <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170473_s_90_2_219x160.jpg"></li> <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170475_s_90_2_219x160.jpg"></li> <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170477_s_90_2_219x160.jpg"></li> <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li> </ul> </div> <script> window.onload = function () { window.onscroll(); }; window.onscroll = function () { var oDiv = document.getElementById('div1'); var oUl = oDiv.children[0]; var aLi = oUl.children; for (var i = 0, l = aLi.length; i < l; i++) { var oLi = aLi[i]; //检查oLi是否在可视区域 var t = document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop); var h = getH(oLi); if (h < t) { setTimeout("setImg(" + i + ")", 500); } console.log(i); } }; function setImg(index){ var oDiv=document.getElementById("div1") var oUl=oDiv.children[0]; var aLi=oUl.children; if (aLi[index].dataset) { var src=aLi[index].dataset.src; } else{ var src=aLi[index].getAttribute('data-src'); } var oImg=document.createElement('img'); oImg.src=src; if (aLi[index].children.length==0) { aLi[index].appendChild(oImg); } } //获得对象距离页面顶端的距离 function getH(obj) { var h = 0; while (obj) { h += obj.offsetTop; obj = obj.offsetParent; } return h; } </script> </body> </html>
这是整个页面的代码。其中有gitH()函数和判断是否在可视区域。
加油。