懶載入原理

時間 2015-12-13 01:25:00

精華區

原文主題

jquery

本文主要根據

一、什麼是滾動載入？

通俗的講就是：當訪問乙個頁面的時候，先把img元素或是其他元素的背景路徑替換成一張大小為1*1px的路徑（這樣就只需請求一次），只有當出現在瀏覽器的可視區域內時，才設定正真的路徑，讓顯示出來。這就是懶載入。

二、為什要使用這個技術？

比如乙個頁面中有很多，如**、京東首頁等等，如果一上來就傳送這麼多請求，頁面載入就會很漫長，如果js檔案都放在了文件的底部，恰巧頁面的頭部又依賴這個js檔案，那就不好辦了。更為要命的是：一上來就傳送百八十個請求，伺服器可能就吃不消了（又不是只有一兩個人在訪問這個頁面）。

因此優點就很明顯了：不僅可以減輕伺服器的壓力，而且可以讓載入好的頁面更快地呈現在使用者面前（使用者體驗好）。

三、怎麼實現？

關鍵點如下：

2、如何獲取正真的路徑，這個簡單，現在正真的路徑存在元素的「data-url」（這個名字起個自己認識好記的就行）屬性裡，要用的時候就取出來，再設定；

3、開始比較之前，先了解一些基本的知識，比如說如何獲取某個元素的尺寸大小、滾動條滾動距離及偏移位置距離；

1）螢幕可視視窗大小：對應於圖中1、2位置處

原生方法：window.innerheight 標準瀏覽器及ie9+ || document.documentelement.clientheight 標準瀏覽器及低版本ie標準模式 ||

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

jquery方法： $(window).height()

2）瀏覽器視窗頂部與文件頂部之間的距離，也就是滾動條滾動的距離：也就是圖中3、4處對應的位置；

原生方法：window.pagyoffset——ie9+及標準瀏覽器 || document.documentelement.scrolltop 相容ie低版本的標準模式 ||

document.body.scrolltop 相容混雜模式；

jquery方法：$(document).scrolltop();

3）獲取元素的尺寸：對應於圖中5、6位置處；左邊jquery方法，右邊原生方法

$(o).width() = o.style.width;

$(o).innerwidth() = o.style.width+o.style.padding;

$(o).outerwidth() = o.offsetwidth = o.style.width+o.style.padding+o.style.border;

$(o).outerwidth(true) = o.style.width+o.style.padding+o.style.border+o.style.margin;

注意：要使用原生的style.***方法獲取屬性，這個元素必須已經有內嵌的樣式，如

；如果原先是通過外部或內部樣式表定義css樣式，必須使用o.currentstyle[***] || document.defaultview.getcomputedstyle(0)[***]來獲採樣式值

4）獲取元素的位置資訊：對應與圖中7、8位置處

1）返回元素相對於文件document頂部、左邊的距離；

jquery：$(o).offset().top元素距離文件頂的距離，$(o).offset().left元素距離文件左邊緣的距離

原生：getoffsettop()，高程上有具體說明，這邊就忽略了；

順便提一下返回元素相對於第乙個以定位的父元素的偏移距離，注意與上面偏移距的區別；

jquery：position()返回乙個物件，$(o).position().left = style.left，$(o).position().top = style.top；

4、知道如何獲取元素尺寸、偏移距離後，接下來乙個問題就是：如何判斷某個元素進入或者即將進入可視視窗區域？下面也通過一張圖來說明問題。

1）外面最大的框為實際頁面的大小，中間淺藍色的框代表父元素的大小，物件1~8代表元素位於頁面上的實際位置；以水平方向來做如下說明！

2）物件8左邊界相對於頁面左邊界的偏移距離（offsetleft）大於父元素右邊界相對於頁面左邊界的距離，此時可判讀元素位於父元素之外；

3）物件7左邊界跨過了父元素右邊界，此時：物件7左邊界相對於頁面左邊界的偏移距離（offsetleft）小於父元素右邊界相對於

頁面左邊界的距離，因此物件7就進入了父元素可視區；

4）在物件6的位置處，物件5的右邊界與頁面左邊界的距離大於父元素左邊界與頁面左邊界的距離；

5）在物件5位置處時，物件5的右邊界與頁面左邊界的距離小於父元素左邊界與頁面左邊界的距離；此時，可判斷元素處於父元素可視區外；

6）因此水平方向必須買足兩個條件，才能說明元素位於父元素的可視區內；同理垂直方向也必須滿足兩個條件；具體見下文的原始碼；

四、擴充套件為jquery外掛程式

使用方法：$("selector").scrollload()

(function($) ;
// 不管有沒有傳入引數，先合併再說；
varparams = $.extend({}, defaults, options || {});
// 把父元素轉為jquery物件；
var container = $(params.container);
// 新建乙個陣列，然後呼叫each方法，用於儲存每個dom物件相關的資料；
params.cache = ;
$(this).each(function() ;
// 把這個物件加到乙個陣列中；
params.cache.push(data);
});var callback = function(call) 
};//每次觸發滾動事件時，對每個dom元素與container元素進行位置判斷，如果滿足條件，就把路徑賦予這個dom元素！
var loading = function() else 
$.each(params.cache, function(i, data) else 
} else 
// 給物件設定完路徑之後，把params.cache中的物件給清除掉；物件再進入可視區，就不再進行重複設定了；
data.obj = null;}}
});};
//載入完畢即執行
loading();
//滾動執行
container.bind("scroll", loading);
};})(jquery);

懶載入原理

hibernate懶載入原理

懶載入的實現原理？

spring bean的懶載入原理

懶載入原理

hibernate懶載入原理

懶載入的實現原理？

spring bean的懶載入原理

相關推薦