摘要:然而,如果前一個定時器尚未執(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
摘要:然而,如果前一個定時器尚未執(zhí)行,其實(shí)就是替換為一個新的定時器,目的是只有在執(zhí)行函數(shù)的請求停止了一段時間后才執(zhí)行。首先清除之前設(shè)置的任何定時器,定時器是儲存在函數(shù)的屬性中的。 導(dǎo)讀 這篇文章中主要介紹一下函數(shù)節(jié)流,然后給了一個圖片懶加載的例子,說圖片懶加載的時候順帶提了下怎么使用JS獲取頁面的寬高,卷上去的長度等。參考來源主要是《JavaScript高級程序設(shè)計》。 函數(shù)節(jié)流 瀏覽器的D...
摘要:景科同學(xué)的想法很簡單,因?yàn)楸救四壳斑€是一個前端小白,只有通過不斷的寫,不斷的學(xué),在與的相愛相殺中才能更快速的進(jìn)步。本項目是景科同學(xué)自寫自測,雖然比較簡單,但是不保證沒有隱藏的。所以如果看官同學(xué)發(fā)現(xiàn)還望留言指正,景科同學(xué)在此以示感謝。 showImg(https://segmentfault.com/img/remote/1460000014251310?w=841&h=630); 本文...
摘要:對象是無法通過這種方式深拷貝。這就是函數(shù)防抖和節(jié)流要做的事情。函數(shù)防抖當(dāng)觸發(fā)頻率過高時函數(shù)基本停止執(zhí)行而函數(shù)節(jié)流則是按照一定的頻率執(zhí)行事件。 對象的深淺拷貝 對象的深拷貝與淺拷貝的區(qū)別: 淺拷貝:僅僅復(fù)制對象的引用, 而不是對象本身。 深拷貝:把復(fù)制的對象所引用的全部對象都復(fù)制一遍 淺拷貝的實(shí)現(xiàn): var obj = { age : 18, person : { ...
摘要:當(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....
摘要:當(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....
閱讀 2132·2021-11-19 09:58
閱讀 1719·2021-11-15 11:36
閱讀 2879·2019-08-30 15:54
閱讀 3399·2019-08-29 15:07
閱讀 2771·2019-08-26 11:47
閱讀 2825·2019-08-26 10:11
閱讀 2511·2019-08-23 18:22
閱讀 2759·2019-08-23 17:58