函數節流和圖片懶加載

tomlingtm 發布于2019-08-21 16:44 / 1064人閱讀

摘要：然而，如果前一個定時器尚未執行，其實就是替換為一個新的定時器，目的是只有在執行函數的請求停止了一段時間后才執行。首先清除之前設置的任何定時器，定時器是儲存在函數的屬性中的。

導讀

這篇文章中主要介紹一下函數節流，然后給了一個圖片懶加載的例子，說圖片懶加載的時候順帶提了下怎么使用JS獲取頁面的寬高，卷上去的長度等。參考來源主要是《JavaScript高級程序設計》。

函數節流

瀏覽器的DOM操作比起非DOM交互需要更多的內存和cpu時間，連續過多的DOM操作可能會導致瀏覽器掛起甚至崩潰。比如使用onresize，onscroll這些可能會被連續觸發的事件的時候，如果事件處理程序中進行了過多地DOM操作，可能就會使得瀏覽器崩潰。而為了繞開這個問題，可能就需要使用到函數節流。
比如：

function resizeDiv(){          //在窗口尺寸改變的時候，調整div的高度
    var div = document.getElementById("myDiv");
    console.log(div.offsetWidth);
    div.style.height = div.offsetWidth + "px";

}
window.onresize = function(){
    resizeDiv();
}

上面的代碼在我簡單的拉伸窗口的時候被連續執行了，如果是更復雜的DOM操作，很可能使得瀏覽器崩潰。其實我想要的只是在我改變完窗口大小后，再調整一次myDiv的高度。

函數節流的指導思想是：某些代碼可以在沒有間斷的情況下重復執行。第一次調用函數，創建一個定時器，在指定的時間間隔后執行代碼。當第二次調用該函數的時候，它會清除前一次的定時器并設置另一個。如果前一個定時器已經執行過了，這個操作沒有意義。然而，如果前一個定時器尚未執行，其實就是替換為一個新的定時器，目的是只有在執行函數的請求停止了一段時間后才執行。

上代碼：

function throttle(method,context){
    clearTimeout(method.tId);            //{1}
    method.tId = setTimeout(function(){
        method.call(context);            //{2}
    },100);
}

throttle方法接收兩個參數：要執行的函數及在哪個作用域中執行。{1}首先清除之前設置的任何定時器，定時器ID是儲存在函數的tId屬性中的。定時器代碼{2}使用call來確保方法在適當的環境中執行。如果沒有給出第二個參數，那么就在全局作用域內執行該方法。

還是上面的例子，這次window.onresize不直接執行事件處理函數了。

window.onresize = function(){
    throttle(resizeDiv);
}

這樣，多數情況下，用戶察覺不到變化，但能夠給瀏覽器節省很多計算。

關于事件節流函數的寫法，網上還看到另一種方法，可以傳入延時時間作為參數，使用了閉包，但是大同小異。
原文在這里

function throttle(method,delay){
    var timer=null;
    return function(){
        var context=this, args=arguments;
        clearTimeout(timer);
        timer=setTimeout(function(){
            method.apply(context,args);
        },delay);
    }
}

同時，那篇文章的作者提到了一個新需求，我覺得也挺實用，就是在函數節流的基礎上間隔固定時間就執行一次。
上代碼：

function throttle(method,delay,duration){
    var timer=null, begin=new Date();       //{1}
    return function(){
        var context=this, args=arguments, current=new Date();
        clearTimeout(timer);
        if(current-begin>=duration){        //{2}
             method.apply(context,args);
             begin=current;
        }else{
            timer=setTimeout(function(){
                method.apply(context,args);
            },delay);
        }
    }
}

在{1}處多設置了一個開始時間，然后在每次調用的時候判斷當前時間是否有超過預設的時間間隔，如果超過了，就立即執行一次事件處理函數，然后再將當前時就按記錄下來，如此往復。

圖片懶加載

在頁面需要加載的圖片很多的情況下，如果一次將所有的圖片全部加載出來，會耗很長的時間，實際的頁面呈現效果肯定不會很理想，所以我們就等到圖片滾動到視口內后，再去對圖片進行加載。

懶加載思路：將頁面里所有img屬性src屬性用data-xx代替，當頁面滾動直至此圖片出現在可視區域時，用js取到該圖片的data-xx的值賦給src。

我們這時候首先遇到一個問題，怎么去判斷圖片是不是進入了視口呢？于是，JS取各種高度的方法就派上用場了。

網頁可見區域寬： document.body.clientWidth;
網頁可見區域高： document.body.clientHeight;
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬);
網頁可見區域高： document.body.offsetHeight (包括邊線的寬);
網頁正文全文寬： document.body.scrollWidth;
網頁正文全文高： document.body.scrollHeight;
網頁被卷去的高： document.body.scrollTop;
網頁被卷去的左： document.body.scrollLeft;
網頁正文部分上： window.screenTop;
網頁正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的寬： window.screen.width;
屏幕可用工作區高度： window.screen.availHeight;

除了這些難記的屬性之外，還要考慮各個瀏覽器的兼容問題，就拿網頁被卷上去的高來舉例

IE6/7/8/9/10：
對于沒有doctype聲明的頁面里可以使用 document.body.scrollTop 來獲取 scrollTop高度；
對于有doctype聲明的頁面則可以使用 document.documentElement.scrollTop ；

Safari:
safari 比較特別，有自己獲取scrollTop的函數： window.pageYOffse t；

Firefox:
直接用 document.documentElement.scrollTop ；

所以，兼容性的寫法就該是：

var srcollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

有了這些知識，一個圖片懶加載的代碼就可以寫了，先假定文檔結構如下：

接下來就是我們加載圖片的代碼了，思路就是上面所說的，當圖片進入視口后，從圖片的data-src中取值，然后賦給src屬性，完成圖片的加載。

這里onscroll被觸發了好多次，我們不妨用一下上面提到的函數節流。使用閉包的那種寫法，修改上面代碼中的一處：

window.onscroll = throttle(showImg,200);

這差不多就是一個帶函數節流的圖片懶加載的解決方法了。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88662.html

函數節流和圖片懶加載

摘要：然而，如果前一個定時器尚未執行，其實就是替換為一個新的定時器，目的是只有在執行函數的請求停止了一段時間后才執行。首先清除之前設置的任何定時器，定時器是儲存在函數的屬性中的。導讀這篇文章中主要介紹一下函數節流，然后給了一個圖片懶加載的例子，說圖片懶加載的時候順帶提了下怎么使用JS獲取頁面的寬高，卷上去的長度等。參考來源主要是《JavaScript高級程序設計》。函數節流瀏覽器的D...

smallStone 2019-08-01 17:40 評論0 收藏0
手摸手-100行代碼自己動手寫個功能完整的圖片懶加載插件

摘要：景科同學的想法很簡單，因為本人目前還是一個前端小白，只有通過不斷的寫，不斷的學，在與的相愛相殺中才能更快速的進步。本項目是景科同學自寫自測，雖然比較簡單，但是不保證沒有隱藏的。所以如果看官同學發現還望留言指正，景科同學在此以示感謝。 showImg(https://segmentfault.com/img/remote/1460000014251310?w=841&h=630); 本文...

CompileYouth 2019-08-22 16:07 評論0 收藏0
前端筆記(二) 對象的深淺拷貝，函數的防抖與節流，函數柯里化，圖片的預加載與懶加載

摘要：對象是無法通過這種方式深拷貝。這就是函數防抖和節流要做的事情。函數防抖當觸發頻率過高時函數基本停止執行而函數節流則是按照一定的頻率執行事件。對象的深淺拷貝對象的深拷貝與淺拷貝的區別：淺拷貝：僅僅復制對象的引用, 而不是對象本身。深拷貝：把復制的對象所引用的全部對象都復制一遍淺拷貝的實現： var obj = { age : 18, person : { ...

dongxiawu 2019-08-26 11:43 評論0 收藏0
實現圖片懶加載(lazyload)

摘要：當頁面圖片很多時，頁面的加載速度緩慢，幾鐘內頁面沒有加載完成，也許會失去很多的用戶。指向一張默認的圖片，否則當為空時也會向服務器發送一次請求。這樣便實現了懶加載。我想實現限制觸發頻率，來優化性能。本文標題:實現圖片懶加載(lazyload)文章作者:Jake發布時間:2016-11-26, 18:46:34最后更新:2016-11-28, 17:12:59原始鏈接:http://i....

renweihub 2019-08-30 13:10 評論0 收藏0
實現圖片懶加載(lazyload)

摘要：當頁面圖片很多時，頁面的加載速度緩慢，幾鐘內頁面沒有加載完成，也許會失去很多的用戶。指向一張默認的圖片，否則當為空時也會向服務器發送一次請求。這樣便實現了懶加載。我想實現限制觸發頻率，來優化性能。本文標題:實現圖片懶加載(lazyload)文章作者:Jake發布時間:2016-11-26, 18:46:34最后更新:2016-11-28, 17:12:59原始鏈接:http://i....

Developer 2019-08-22 10:44 評論0 收藏0