懶載入示例
阿新 • • 發佈：2020-07-09
程式碼
<!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><imgabc="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>