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

smallStone 發(fā)布于2019-08-01 17:40 / 3077人閱讀

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

導(dǎo)讀

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

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

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

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

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

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

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

上代碼：

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

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

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

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

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

關(guān)于事件節(jié)流函數(shù)的寫(xiě)法，網(wǎng)上還看到另一種方法，可以傳入延時(shí)時(shí)間作為參數(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í)，那篇文章的作者提到了一個(gè)新需求，我覺(jué)得也挺實(shí)用，就是在函數(shù)節(jié)流的基礎(chǔ)上間隔固定時(shí)間就執(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è)置了一個(gè)開(kāi)始時(shí)間，然后在每次調(diào)用的時(shí)候判斷當(dāng)前時(shí)間是否有超過(guò)預(yù)設(shè)的時(shí)間間隔，如果超過(guò)了，就立即執(zhí)行一次事件處理函數(shù)，然后再將當(dāng)前時(shí)就按記錄下來(lái)，如此往復(fù)。

圖片懶加載

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

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

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

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

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

IE6/7/8/9/10：
對(duì)于沒(méi)有doctype聲明的頁(yè)面里可以使用 document.body.scrollTop 來(lái)獲取 scrollTop高度；
對(duì)于有doctype聲明的頁(yè)面則可以使用 document.documentElement.scrollTop ；

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

Firefox:
直接用 document.documentElement.scrollTop ；

所以，兼容性的寫(xiě)法就該是：

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

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

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

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

window.onscroll = throttle(showImg,200);

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

GPU云服務(wù)器云服務(wù)器 js圖片懶加載 js實(shí)現(xiàn)數(shù)據(jù)的懶加載圖片懶加載懶加載異常

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/51294.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

smallStone

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow矩陣拼接

閱讀 2582·2023-04-26 02:18
國(guó)慶看了長(zhǎng)津湖 | 堅(jiān)韌的毅力讓我拿到了薪資18.5K，人生就像馬拉松，堅(jiān)持到最后，就是勝利者

閱讀 1327·2021-10-14 09:43
騰訊云輕量應(yīng)用服務(wù)器老用戶回饋：免費(fèi)領(lǐng)取2核4G輕量云服務(wù)器1年

閱讀 3899·2021-09-26 10:00
什么是主機(jī)的用戶名和密碼是什么-電腦的用戶名和密碼是什么？

閱讀 7378·2021-09-22 15:28
關(guān)于CSS的那些事

閱讀 2602·2019-08-30 15:54
css篇之a(chǎn)bsolute絕對(duì)定位元素居中技巧

閱讀 2668·2019-08-30 15:52
談?wù)勴憫?yīng)式布局

閱讀 551·2019-08-29 11:30
CSS查漏補(bǔ)缺

閱讀 3527·2019-08-29 11:05

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章