成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

函數(shù)節(jié)流和圖片懶加載

tomlingtm / 1069人閱讀

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

導(dǎo)讀

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

函數(shù)節(jié)流

瀏覽器的DOM操作比起非DOM交互需要更多的內(nèi)存和cpu時間,連續(xù)過多的DOM操作可能會導(dǎo)致瀏覽器掛起甚至崩潰。比如使用onresize,onscroll這些可能會被連續(xù)觸發(fā)的事件的時候,如果事件處理程序中進(jìn)行了過多地DOM操作,可能就會使得瀏覽器崩潰。而為了繞開這個問題,可能就需要使用到函數(shù)節(jié)流。
比如:

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

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

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

函數(shù)節(jié)流的指導(dǎo)思想是:某些代碼可以在沒有間斷的情況下重復(fù)執(zhí)行。第一次調(diào)用函數(shù),創(chuàng)建一個定時器,在指定的時間間隔后執(zhí)行代碼。當(dāng)?shù)诙握{(diào)用該函數(shù)的時候,它會清除前一次的定時器并設(shè)置另一個。如果前一個定時器已經(jīng)執(zhí)行過了,這個操作沒有意義。然而,如果前一個定時器尚未執(zhí)行,其實(shí)就是替換為一個新的定時器,目的是只有在執(zhí)行函數(shù)的請求停止了一段時間后才執(zhí)行。

上代碼:

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

throttle方法接收兩個參數(shù):要執(zhí)行的函數(shù)及在哪個作用域中執(zhí)行。{1}首先清除之前設(shè)置的任何定時器,定時器ID是儲存在函數(shù)的tId屬性中的。定時器代碼{2}使用call來確保方法在適當(dāng)?shù)沫h(huán)境中執(zhí)行。如果沒有給出第二個參數(shù),那么就在全局作用域內(nèi)執(zhí)行該方法。

還是上面的例子,這次window.onresize不直接執(zhí)行事件處理函數(shù)了。

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

這樣,多數(shù)情況下,用戶察覺不到變化,但能夠給瀏覽器節(jié)省很多計算。

關(guān)于事件節(jié)流函數(shù)的寫法,網(wǎng)上還看到另一種方法,可以傳入延時時間作為參數(shù),使用了閉包,但是大同小異。
原文在這里

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

同時,那篇文章的作者提到了一個新需求,我覺得也挺實(shí)用,就是在函數(shù)節(jié)流的基礎(chǔ)上間隔固定時間就執(zhí)行一次。
上代碼:

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}處多設(shè)置了一個開始時間,然后在每次調(diào)用的時候判斷當(dāng)前時間是否有超過預(yù)設(shè)的時間間隔,如果超過了,就立即執(zhí)行一次事件處理函數(shù),然后再將當(dāng)前時就按記錄下來,如此往復(fù)。

圖片懶加載

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

懶加載思路:將頁面里所有img屬性src屬性用data-xx代替,當(dāng)頁面滾動直至此圖片出現(xiàn)在可視區(qū)域時,用js取到該圖片的data-xx的值賦給src。

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

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

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

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

Safari:
safari 比較特別,有自己獲取scrollTop的函數(shù) : window.pageYOffse t;

Firefox:
直接用 document.documentElement.scrollTop ;

所以,兼容性的寫法就該是:

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

有了這些知識,一個圖片懶加載的代碼就可以寫了,先假定文檔結(jié)構(gòu)如下:


    

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

這里onscroll被觸發(fā)了好多次,我們不妨用一下上面提到的函數(shù)節(jié)流。使用閉包的那種寫法,修改上面代碼中的一處:

window.onscroll = throttle(showImg,200);

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

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/88662.html

相關(guān)文章

  • 函數(shù)節(jié)流圖片加載

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

    smallStone 評論0 收藏0
  • 手摸手-100行代碼自己動手寫個功能完整的圖片加載插件

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

    CompileYouth 評論0 收藏0
  • 前端筆記(二) 對象的深淺拷貝,函數(shù)的防抖與節(jié)流函數(shù)柯里化 ,圖片的預(yù)加載加載

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

    dongxiawu 評論0 收藏0
  • 實(shí)現(xiàn)圖片加載(lazyload)

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

    renweihub 評論0 收藏0
  • 實(shí)現(xiàn)圖片加載(lazyload)

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

    Developer 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<