jqueryのlazyloadの実装原理の解析 遅延読み込みtechnology_jquery

はじめに

遅延読み込みテクノロジ (lazyload と呼ばれる) は、Web ページのパフォーマンスを最適化するための JS プログラマのためのソリューションです。 Lazyload の中核は、オンデマンドでロードすることです。 Lazyload は、Google の画像検索ページ、Thunder ホームページ、淘宝網、QQ Zone などの大規模な Web サイトで見つけることができます。したがって、lazyload テクノロジを習得することは良い選択です。残念ながら、jquery プラグインの遅延ロードの公式 Web サイト (http://www.appelsiini.net/projects/lazyload) には、新しいブラウザーはサポートされていないと記載されています。 。

lazyload はどのような状況でより適していますか?

画像、フラッシュ リソース、iframe、Web ページ エディター (FCK と同様) などを使用すると、多くの帯域幅が消費され、これらのモジュールは当面ブラウザの表示領域に表示されないため、lazyload を使用できます。適切なタイミングでそのようなリソースをロードします。 Web ページを開いたときに大量のリソースが読み込まれ、ユーザーが長時間待たされることを避けてください。

lazyload を実装するにはどうすればよいですか?

lazyload の難しさは、ユーザーが必要とするリソースを適切なタイミングでロードする方法です (ここでユーザーが必要とするリソースとは、ブラウザーの表示領域に表示されるリソースを指します)。したがって、ターゲットがクライアント領域にレンダリングされたかどうかを判断するには、次のようないくつかの情報を知る必要があります。

ブラウザの上部を基準とした表示領域の位置。
• ブラウザの上部を基準とした、ロードされるリソースの位置。

上記の 2 点のデータを取得した後、次の関数を使用して、オブジェクトが

ブラウザの表示領域 内にあるかどうかを判断できます。
ブラウザの表示領域の位置を返します

コードをコピーします コードは次のとおりです。

// ブラウザの表示領域の位置を返します
function getClient(){
var l, t, w, h;
l = document.documentElement.scrollLeft | | document.body .scrollLeft;
t = document.documentElement.scrollTop;
h = document.documentElement.clientHeight; return { left: l, top: t, width: w, height: h };
}



ロードするリソースの場所に戻ります

コードをコピー コードは次のとおりです: // ロードするリソースの場所を返します。

関数 getSubClient(p){

var l = 0 , t = 0, w, h;
w = p.offsetWidth;
h = p.offsetHeight; offsetParent){
l = p.offsetLeft;
t = p.offsetTop;
}
return { 左: l、上: t、幅: w , height: h };
}


関数 getClient() はブラウザのクライアント領域情報を返し、getSubClient() はターゲット モジュール領域の情報を返します。このとき、対象モジュールがクライアント領域に出現するか否かは、実際には上の２つの四角形が交差するかどうかで判断することになる。

コードをコピー

コードは次のとおりです: // 2 つの四角形が交差するかどうかを判断して返します。ブール値関数 intens(rec1, rec2){ var lc1, lc2, tc1, tc2, w1, h1;

lc1 = rec1.left rec1.width / 2; .left rec2.width / 2;

tc1 = rec1.top rec1.height / 2;
w1 = (rec1.width rec2.width) / 2;
h1 = (rec1.height rec2.height) / 2;
return Math.abs(lc1 - lc2) }


これで基本的に遅延読み込みを実装できます。次に、ターゲット領域がクライアント領域に表示されるかどうかを監視するコードを window.onscroll イベントに記述します。




コードをコピー

コードは次のとおりです:

>

コードをコピーします

コードは次のとおりです:

var div1 = document.getElementById("div1"); window.onscroll = function(){ var prec1 = getClient(); var prec2 = getSubClient(div1); if (intens(prec1, prec2)) { alert("true") }

};
We only need to load the resources we need in the pop-up window.
What is worth noting here is that when the target object is presented in the client area, pop-up windows will continue to pop up as it scrolls. Therefore, we need to cancel the monitoring of this area after the first window pops up. Here, an array is used to collect the objects that need to be monitored, and the monitoring logic is extracted at the same time. At the same time, it should be noted that the onscroll event and the onresize event will change the browser's visible area information, so it needs to be recalculated after this type of event is triggered, which is implemented here with the autocheck() function.
Add elements:

Copy code The code is as follows:

Copy code The code is as follows:

// Compare whether a certain sub-area is rendered in the browser area
function jiance(arr, prec1, callback){
var prec2;
for (var i = arr.length - 1; i >= 0; i--) {
if (arr[i]) {
prec2 = getSubClient(arr[i]) ;
if (intens(prec1, prec2)) {
callback(arr[i]);
// After loading the resource, delete the monitoring
delete arr[i];
}
}
}
}

Copy code The code is as follows:

//Detect whether the target object appears in the client area
function autocheck(){
var prec1 = getClient();
jiance(arr, prec1, function(obj){
// Load resources...
alert(obj.innerHTML);
})
}
// Sub-area one
var d1 = document.getElementById("d1");
// Sub-area two
var d2 = document.getElementById("d2");
// Need to load the area collection on demand
var arr = [d1, d2];
window. onscroll = function(){
// Recalculate
　autocheck();
}
window.onresize = function(){
// Recalculate
autocheck();
}