js圖片（載入已經滾動的區域的圖片）懶載入的實現方法
阿新 • • 發佈：2018-11-09
這種方法，會載入已經滾動區域的所有圖片，比如進入頁面就到了底部，那麼整個頁面的圖片都會載入。
區別於JS實現可視區域懶載入 、Jquery實現可是區域懶載入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> body{ height: 10000px; } img{ width: 400px; height: 400px; } </style> <body> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> </body> </html> <script> var num = document.getElementsByTagName('img').length; var img = document.getElementsByTagName("img"); var n = 0; //儲存圖片載入到的位置，避免每次都從第一張圖片開始遍歷 lazyload(); //頁面載入完畢載入可是區域內的圖片 window.addEventListener('scroll',throttle(lazyload,500,1000)); // 實際想繫結在 scroll 事件上的 handler function lazyload(event) { var seeHeight = document.documentElement.clientHeight; //可見區域高度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滾動條距離頂部高度 for (var i = n; i < num; i++) { if ( img[i].offsetTop < (seeHeight + scrollTop) && img[i].offsetTop > scrollTop) { if (img[i].getAttribute("src") == "") { img[i].src = img[i].getAttribute("data-src"); } n = i + 1; } } } // 採用了節流函式 // 簡單的節流函式 //fun 要執行的函式 //delay 延遲 //time 在time時間內必須執行一次 function throttle(fun, delay, time) { var timeout, startTime = new Date(); return function() { var context = this, args = arguments, curTime = new Date(); clearTimeout(timeout); // 如果達到了規定的觸發時間間隔，觸發 handler if (curTime - startTime >= time) { fun.apply(context, args); startTime = curTime; // 沒達到觸發間隔，重新設定定時器 } else { timeout = setTimeout(fun, delay); } }; }; </script>