欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

圖片懶加載插件實例分享（含解析）

 更新時間：2017年01月09日 15:04:59   作者：beidan  
本文主要介紹了圖片懶加載插件，函數(shù)節(jié)流的應(yīng)用以及函數(shù)節(jié)流具體的好處、常用的場景。具有一定的參考價值，下面跟著小編一起來看下吧

在面試的時候有面試官問我，懶加載這個插件你有沒有想到如何去優(yōu)化？又間接問我函數(shù)節(jié)流的問題，嘿嘿，今天就更新下這個插件，順便應(yīng)用下函數(shù)節(jié)流（throttle），先直接上下代碼，含解析

/*
 * 函數(shù)功能：函數(shù)節(jié)流
 * fn 需要調(diào)用的函數(shù)
 * delay 函數(shù)需要延遲處理的時間
 * mustRunDelay 超過該時間，函數(shù)一定會執(zhí)行
 * */
 var throttle = function (fn, delay, mustRunDelay) {
 var timer; //使用閉包存儲timer
 var t_start;
 //閉包返回的函數(shù)
 return function (val) {
 var args = arguments, t_curr = +new Date(); //使用+new Date() 將字符串轉(zhuǎn)換成數(shù)字
 clearTimeout(timer);
 if (!t_start) { // 使用!t_start 如果t_start=undefined或者null 則為true
 t_start = t_curr;
 }
 if (t_curr - t_start >= mustRunDelay) {
 fn.apply(null, args);
 t_start = t_curr;
 } else {
 timer = setTimeout(function () {
  fn.apply(null, args);
 }, delay);
 }
 }
 };
 /*使用方法*/
 var throttle1 = throttle(fn, 500, 4000);
 //在該需要調(diào)用的函數(shù)內(nèi)部調(diào)用此函數(shù)
 throttle1(val); //此處傳人的參數(shù)為以上fn需要傳人的參數(shù)

至于函數(shù)節(jié)流具體的好處，常用的場景，以下文章說得非常清楚，我就不再說啦～

很多網(wǎng)站都會用到‘圖片懶加載'這種方式對網(wǎng)站進行優(yōu)化，即延遲加載圖片或符合某些條件才開始加載圖片。于是心血來潮，決定自己手動寫一下'圖片懶加載‘插件。

使用這個技術(shù)有什么顯著的優(yōu)點？

比如一個頁面中有很多圖片，如淘寶首頁等等，一個頁面有100多的圖片，如果一上來就發(fā)送這么多請求，頁面加載就會很漫長，如果js文件都放在了文檔的底部，恰巧頁面的頭部又依賴這個js文件，那就不好辦了。用戶感覺這個頁面就會很卡。

懶加載原理：瀏覽器會自動對頁面中的img標簽的src屬性發(fā)送請求并下載圖片。通過動態(tài)改變img的src屬性實現(xiàn)。

當訪問一個頁面的時候，先把img元素或是其他元素的背景圖片路徑替換成loading圖片地址（這樣就只需請求一次）

等到一定條件（這里是頁面滾動到一定區(qū)域），用實際存放img地址的laze-load屬性的值去替換src屬性，即可實現(xiàn)'懶加載'。

//即使img的src值為空，瀏覽器也會對服務(wù)器發(fā)送請求。所以平時做項目的時候，如果img沒有用到src，就不要出現(xiàn)src這個屬性

先上三個重要的知識點

1.獲取屏幕可視窗口大?。?/strong>

document.documentElement.clientHeight 標準瀏覽器及低版本IE標準模式

document.body.clientHeight 低版本混雜模式

2.元素相對于文檔document頂部

element.offsetTop

3.滾動條滾動的距離

document.documentElement.scrollTop   兼容ie低版本的標準模式

document.body.scrollTop 兼容混雜模式；

滾動加載：當圖片出現(xiàn)在可視區(qū)域時，動態(tài)加載該圖片。

原理：當圖片元素頂部是否在可視區(qū)域內(nèi)，（圖片相對于文檔document頂部-滾動條滾動的距離）< 可視窗口大小，改變該img的src屬性 

實現(xiàn)原理：

1.首先從所有相關(guān)元素中找出需要延時加載的元素，放在element_obj數(shù)組中。

function initElementMap() {
 var el = document.getElementsByTagName('img');
 for (var j = 0, len2 = el.length; j < len2; j++) {
 //判斷當前的img是否加載過了，或者有l(wèi)azy_src標志 [未完成]
 if (typeof (el[j].getAttribute("lazy_src"))) {
 element_obj.push(el[j]);
 download_count++;
 }
 }
 }

2.判斷數(shù)組中的img對象，若滿足條件，則改變src屬性

function lazy() {
 if (!download_count) return;
 var innerHeight = getViewport();
 for (var i = 0, len = element_obj.length; i < len; i++) {
//得到圖片相對document的距上距離
 var t_index = getElementViewTop(element_obj[i]); 
 if (t_index - getScrollTop() < innerHeight) {
 element_obj[i].src = element_obj[i].getAttribute("lazy-src");
 delete element_obj[i];
 download_count--;
 }
 }
}

3.滾動的時候觸發(fā)事件，1000毫秒后執(zhí)行l(wèi)azy（）方法。

 window.onscroll = window.onload = function () {
 setTimeout(function () {
 lazy();
 }, 1000)
 }

整部分代碼位于閉包自執(zhí)行函數(shù)中。相應(yīng)的方法放在init中。

var lazyLoad = (function () { 
 function init() {
 initElementMap();
 lazy();
 };
 return {
 init: init 
 }
})();

使用格式 ：src填默認loading圖片地址，真實的圖片地址填在lazy-src屬性里，切記需指定寬高。在外部調(diào)用  lazyLoad.init();

全部的代碼以及例子已經(jīng)上傳到github上了，地址是：https://github.com/beidan/lazeLoadImg，歡迎star

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

相關(guān)文章

最新評論