代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin:0; padding:0; } ul,ul li{ list-style:none; } #list{ width:1200px; margin:0 auto; display:flex; flex-wrap:wrap; } #list li{ width:350px; height:310px; border:1px solid #000; margin:20px; } #list li img{ width:100%; height:100%; } </style> </head> <body> <ul id="list"> <li><img abc="images/1.jpg" alt=""></li> <li><img abc="images/2.jpg" alt=""></li> <li><img abc="images/3.jpg" alt=""></li> <li><img abc="images/4.jpg" alt=""></li> <li><img abc="images/5.jpg" alt=""></li> <li><img abc="images/6.jpg" alt=""></li> <li><img abc="images/7.jpg" alt=""></li> <li><img abc="images/8.jpg" alt=""></li> <li><img abc="images/9.jpg" alt=""></li> <li><img abc="images/1.jpg" alt=""></li> <li><img abc="images/2.jpg" alt=""></li> <li><img abc="images/3.jpg" alt=""></li> <li><img abc="images/4.jpg" alt=""></li> <li><img abc="images/5.jpg" alt=""></li> <li><img abc="images/6.jpg" alt=""></li> <li><img abc="images/7.jpg" alt=""></li> <li><img abc="images/8.jpg" alt=""></li> <li><img abc="images/9.jpg" alt=""></li> </ul> <script> /* 1.图片路径放在非src属性中 【能阻止加载图片】 2.加载可视区部分，获取 刚才放有图片路径的属性值 3.再将可视区部分的img设置成刚才获取的图片路径 */ var imgs = document.getElementsByTagName('img'); // 获取所有图片 var pageHeight = document.documentElement.clientHeight; // 浏览器可视高度 【固定】 window.onscroll = lazyLoad; function lazyLoad(){ // 窗口滚动事件 for(var i=0;i<imgs.length;i++){ // 每一张图片距离顶部距离是固定的 不会发生改变 【固定】 // 用浏览器可视高与页面卷去的高度之和 与 每一张图片距离顶部距离做比较，如果 高度之和大于等于 某一张图片的高度，就显示该图片 if(pageHeight+ document.documentElement.scrollTop >= imgs[i].offsetTop){ imgs[i].src = imgs[i].getAttribute('abc'); // 获取满足条件图片的abc属性，将其值赋给图片的src属性 } } } lazyLoad(); </script> </body> </html>
效果
