js 实现懒加载
原理：利用scrollTop+盒子的高度与图片的offsetTop进行比较，如果大于 说明就在视窗内，将图片盒子的地址更改路径即可
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>lazyload</title> <style> #pictures{ width: 900px; border: 1px solid #ccc; overflow: hidden; } .picture{ float:left; width:250px; height:250px; margin: 10px 20px; border:1px solid #ccc; } </style> </head> <body> <div id="pictures"> <img data-original="images/1.png" alt="" class="picture" src="" > <img data-original="images/2.png" alt="" class="picture" src="" > <img data-original="images/3.png" alt="" class="picture" src="" > <img data-original="images/4.png" alt="" class="picture" src="" > <img data-original="images/5.png" alt="" class="picture" src="" > <img data-original="images/6.png" alt="" class="picture" src="" > <img data-original="images/7.jpg" alt="" class="picture" src="" > <img data-original="images/8.jpg" alt="" class="picture" src="" > <img data-original="images/9.jpg" alt="" class="picture" src="" > <img data-original="images/10.jpg" alt="" class="picture" src="" > <img data-original="images/11.jpg" alt="" class="picture" src="" > <img data-original="images/12.jpg" alt="" class="picture" src="" > <img data-original="images/13.jpg" alt="" class="picture" src="" > <img data-original="images/14.png" alt="" class="picture" src="" > <img data-original="images/15.png" alt="" class="picture" src="" > <img data-original="images/16.png" alt="" class="picture" src="" > <img data-original="images/17.png" alt="" class="picture" src="" > <img data-original="images/18.png" alt="" class="picture" src="" > <img data-original="images/19.png" alt="" class="picture" src="" > <img data-original="images/20.png" alt="" class="picture" src="" > <img data-original="images/21.png" alt="" class="picture" src="" > <img data-original="images/22.png" alt="" class="picture" src="" > <img data-original="images/23.png" alt="" class="picture" src="" > <img data-original="images/24.png" alt="" class="picture" src="" > </div> <script> var images=document.getElementsByTagName('img'); function lazyload() { Array.prototype.forEach.call(images,function(item,index) { var height=document.documentElement.clientHeight; var scrollTop=document.documentElement.scrollTop; var offsetTop=item.offsetTop; //只要下方的图片滚动视图区域 if(scrollTop+height>offsetTop){ //此处是加载图片 ，必须要 var img = new Image(); img.onload = function () { item.src = img.src; } item.src = item.dataset.original; } }); //以下方法是不能的 滚动的时候会全部一次性重新刷新图片 /*for(var i = 0;i < images.length; i++){ let item = images[i] var height=document.documentElement.clientHeight; var scrollTop=document.documentElement.scrollTop; var offsetTop=item.offsetTop; if(scrollTop+height>offsetTop){ var img = new Image(); img.onload = function () { item.src = img.src; } img.src = item.dataset.original; } }*/ } lazyload(); //第一次加载页面时需要自动加载 document.addEventListener("scroll",lazyload); </script> </body> </html>