ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptの遅延読み込み技術（lazyload）の簡単実装_javascriptスキル
JavaScriptの遅延読み込み技術（lazyload）の簡単実装_javascriptスキル
- WBOYオリジナル
- 2016-05-16 18:11:52924ブラウズ
1. はじめに
遅延ロード テクノロジ (lazyload と呼ばれる) は、Web ページのパフォーマンスを最適化するための JS プログラマ向けのソリューションです。たとえば、Google の画像検索ページ、Thunder ホームページ、淘宝網、QQ スペースなどです。したがって、Lazyload テクノロジを習得することは良い選択です。jquery プラグインの Layload 公式 Web サイト (http://www.appelsiini. net/projects/lazyload) は、新しいバージョンのブラウザーをサポートしていないと表示されます。
2. Lazyload はどのような状況に適していますか?
これには、多くの帯域幅を消費する画像、Flash リソース、iframe、Web ページ エディターなどが含まれます。現時点では、ビューポート内では、lazyload を使用してこのタイプのリソースを適切なタイミングで読み込むことができます。Web ページを開いたときに大量のリソースを読み込んで、ユーザーを長時間待たせることは避けられます。 >
3. レイジーロードの実装方法
レイジーロードの難しさ ユーザーが必要とするリソースを適切なタイミングでロードする方法 (ここでユーザーが必要とするリソースとは、ブラウザーの表示領域に表示されるリソースを指します) ）。したがって、ターゲットがクライアント領域に表示されているかどうかを判断するには、次のようないくつかの情報を知る必要があります:
1. ブラウザの上部を基準としたビジュアル領域の位置
2. 位置
上記の 2 点のデータを取得した後、次の関数を使用して、オブジェクトがブラウザの表示領域にあるかどうかを判断できます。
function getClient() {
var l,t,w,h;
l = document.documentElement.scrollLeft ||
t = document.body.scrollTop; 🎜> w = document.documentElement.clientWidth;
戻り値 {'left':l,'top':t,'width':w,'height':h} ; 🎜> //ロードするリソースの場所に戻ります
function getSubClient(p){
var l = 0,t = 0,w,h;
w = p.offsetWidth; > h = p.offsetHeight;
while(p.offsetParent ){
l = p.offsetLeft;
t = p.offsetTop; 'height':h } ;
}
関数getClient()はブラウザクライアント領域の領域情報を返し、getSubClient()はターゲットモジュール領域の情報を返します。このとき、対象モジュールがクライアント領域に表示されるかどうかは、実際には上記の 2 つの四角形
コピーコード
これで、基本的にウィンドウに遅延読み込みを実装できます。 onscroll イベント このコードは、ターゲット領域がクライアント領域にレンダリングされるかどうかを監視します。
コードをコピーします
コードは次のとおりです。 🎜>
< div style = "width:100px; height:3000px">
var d1 = document.getElementById("d1");
Window.onscroll = function(){
We only need to load the resources we need in the pop-up window.
It is worth noting here that when the target object is presented in the client area, the pop-up window will continue to pop up as it scrolls. Therefore, we need to pop-up the first To cancel the monitoring of this area after a window, an array is used here to collect the objects that need to be monitored. It is also important to note: Because both the onscroll event and the onresize event will change the browser's visible area information, it is necessary to recalculate whether the target object is in the visible area after this type of event is triggered. Here, the autocheck() function is used to achieve this. (Lazyload on the Thunder homepage Whether the target object is in the visible area of the browser is not recalculated in the onresize event. Therefore, if you first reduce the browser window to a certain size, scroll to the area where the image needs to be loaded, and then click maximize, the image will not be loaded. Haha, you will need it later. Note).
Add element:
// Compare whether a certain sub-area is presented 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]);
delete monitoring
delete arr[i]; = getClient();
jiance(arr,prec1,function(obj){
//Load resources...
alert(obj.innerHTML)
})
}
//Subarea one
var d1 = document.getElementById("d1");
//Subarea two
var d2 = document.getElementById("d2");
//Need to press Need to load the area collection
var arr = [d1,d2];
window.onscroll = function(){
// Recalculate
autocheck();
}
window. onresize = function(){
// Recalculate
autocheck();
}
Now we only need to load the resources we need in the pop-up window. Source code I won’t post it here. If anyone needs it or has any questions, please contact me.