目錄：
在上篇文章給大家介紹了JavaScript實現圖片懶加載(Lazyload)，大家可以參考下。
懶加載的意義（為什么要使用懶加載）
對頁面加載速度影響最大的就是圖片，一張普通的圖片可以達到幾M的大小，而代碼也許就只有幾十KB。當頁面圖片很多時，頁面的加載速度緩慢，幾S鐘內頁面沒有加載完成，也許會失去很多的用戶。
所以，對于圖片過多的頁面，為了加速頁面加載速度，所以很多時候我們需要將頁面內未出現在可視區域內的圖片先不做加載， 等到滾動到可視區域后再去加載。這樣子對于頁面加載性能上會有很大的提升，也提高了用戶體驗。
將頁面中的img標簽src指向一張小圖片或者src為空，然后定義data-src（這個屬性可以自定義命名，我才用data-src）屬性指向真實的圖片。src指向一張默認的圖片，否則當src為空時也會向服務器發送一次請求。可以指向loading的地址。
注：圖片要指定寬高
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" />
當載入頁面時，先把可視區域內的img標簽的data-src屬性值負給src，然后監聽滾動事件，把用戶即將看到的圖片加載。這樣便實現了懶加載。
代碼
在寫代碼前，需要了解各種高度。先看這篇文章scrollTop,offsetTop,scrollLeft,offsetLeft
<head><meta charset="UTF-8"><title>Document</title><style>img {display: block;margin-bottom: 50px;width: 400px;height: 400px;}</style></head><body><img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""><img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""><img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt=""><img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt=""><img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""><img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""><img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""><img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""><img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt=""><img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""><img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""></body>JavaScript
<script>var num = document.getElementsByTagName('img').length;var img = document.getElementsByTagName("img");var n = 0; //存儲圖片加載到的位置，避免每次都從第一張圖片開始遍歷lazyload(); //頁面載入完畢加載可是區域內的圖片window.onscroll = lazyload;function lazyload() { //監聽頁面滾動事件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) {if (img[i].getAttribute("src") == "default.jpg") {img[i].src = img[i].getAttribute("data-src");}n = i + 1;}}}</script>jQuery
<script>var n = 0,imgNum = $("img").length,img = $('img');lazyload();$(window).scroll(lazyload);function lazyload(event) {for (var i = n; i < imgNum; i++) {if (img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {if (img.eq(i).attr("src") == "default.jpg") {var src = img.eq(i).attr("data-src");img.eq(i).attr("src", src);n = i + 1;}}}}</script>使用節流函數進行性能優化
如果直接將函數綁定在scroll事件上，當頁面滾動時，函數會被高頻觸發，這非常影響瀏覽器的性能。
我想實現限制觸發頻率，來優化性能。
節流函數：只允許一個函數在N秒內執行一次。下面是一個簡單的節流函數：
// 簡單的節流函數//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);// 如果達到了規定的觸發時間間隔，觸發 handlerif (curTime - startTime >= time) {fun.apply(context, args);startTime = curTime;// 沒達到觸發間隔，重新設定定時器} else {timeout = setTimeout(fun, delay);}};};// 實際想綁定在 scroll 事件上的 handlerfunction lazyload(event) {}// 采用了節流函數window.addEventListener('scroll',throttle(lazyload,500,1000));以上所述是小編給大家介紹的JavaScript如何實現圖片懶加載(lazyload) 提高用戶體驗(增強版)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
