jquery イメージの遅延読み込み フロントエンド開発の必須スキル series_jquery

現在、大手ショッピングサイトはどこもこの読み込み方式を採用しています。今日はネット民のサイトで画像を遅延読み込みするプラグインを見つけたので紹介します。
まず、画像の遅延読み込みの原理を紹介します。まず、画像の実際のアドレスをカスタム属性に保存する必要があります (属性名はあなた次第です。ここでは、lazy-src を使用します)。そして、画像の src 属性をプレースホルダー画像に置き換えます。画像が小さいほど、基本的には機能し、表示されません。

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

初め。ページの読み込みが開始されると、ブラウザは現在のページ内のすべての画像の位置を取得してキャッシュし (オフセット値が取得されると、ページのリフローがトリガーされます)、表示領域を計算し、画像の位置が画像が表示領域に表示されます。js を使用して、画像タグの src 値を画像の実際のアドレスに動的に置き換えます。このとき、表示領域に表示された画像の読み込みが開始されます。
2番目。ユーザーがページを下にスクロールすると、表示領域に初めて表示される画像があるかどうかを js を使用して再計算し、存在する場合は、これらの画像の src 値が置き換えられるだけで、実際の画像がロードされます。繰り返しの操作によるメモリ リークを避けるために、すべてのイメージがロードされた後に、対応するトリガー イベントをアンロードする必要があります。
最後に。この記事ではウィンドウ全体を大きなコンテナとして扱いますが、必要に応じて、小さなコンテナ内に画像の遅延読み込みを実装することもできます。原理はシンプルですが、応用範囲は多岐にわたります。
以下のアドレスからイメージの遅延読み込みのデモを見ることができますが、対応するツール (firebug、Fiddler2) を使用してイメージの遅延読み込みの影響を監視してみてください。
画像遅延読み込みプラグインのコードは次のとおりです。

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

画像の遅延読み込みプラグイン コード
(function( $ ){
$.fn.imglazyload = function( options ){
var o = $.extend({
attr : 'lazy-src'、
コンテナ : window、
event : 'scroll'、
fadeIn : false、
threshold : 0、
vertical : true
}、オプション),
event = o.event,
vertical = o.vertical,
container = $( o.container ),
threshold = o.threshold,
// jQuery オブジェクトを次のように変換しますDOM 配列の操作は簡単です
elems = $.makeArray( $(this) ),
dataName = 'imglazyload_offset',
OFFSET =vertical ? 'top' : 'left',
SCROLL =垂直 ? ' スクロールトップ' : 'スクロール左',
winSize = 垂直 ? コンテナ.width(),
scrollCoord = コンテナ[ SCROLL ](),
docSize = winSize スクロール座標
/ / 遅延読み込みトリガー
vartrigger = {
init : function( coord ){
return coord >=scrollCoord &&
coord <= ( docSize Threshold ); ,
scroll : function( coord ){
varscrollCoord =container[ SCROLL ]();
return coord >=scrollCoord &&
coord <= ( winSizescrollCoord しきい値 ); } ,
resize : function( coord ){
varscrollCoord = コンテナ[ SCROLL ](),
winSize = 垂直 ?
container.height() :
container.width();
return coord >=scrollCoord &&
coord <= ( winSizescrollCoord 閾値 );
varloader = function(triggerElem,event){
var i = 0,
isCustom = false,
isTrigger, coord, elem, $elem, LazySrc;
// カスタム イベントはトリガーするだけでよく、判断する必要はありません
if(event){
if( イベント !== 'スクロール' && イベント !== 'サイズ変更' ){
isCustom = true
}
}
else{
イベント = 'init';
}
for( ; i isTrigger = false;
$elem = $( elem ); >lazySrc = $elem.attr( o.attr );
if( !lazySrc || elem.src === LazySrc ){
Continue;
}
// まずオフセット値を取得しますキャッシュから計算値を取得します。キャッシュにない場合にのみ計算値を取得します。
// 繰り返しの取得によるリフローを避けるために計算値をキャッシュします。
coord = $elem.data( dataName ); ( coord === 未定義 ){
coord = $elem.offset()[ OFFSET ];
$elem.data( dataName, coord );
isTrigger = isCustom トリガー [イベント ]( coord );
if( isTrigger ){
// 画像を読み込みます
elem.src = LazySrc;
if( o.fadeIn ){
$elem.hide(). fadeIn();
}
// キャッシュを削除
$elem.removeData( dataName );
// DOM 配列から DOM を削除
elems.splice( i--, 1 );
}
}
//すべての画像がロードされた後にトリガー イベントをアンロードします
if( !elems.length ){
if(triggerElem ){
triggerElem.unbind(イベント、火 );
}
else{
container.unbind( o.event, fire )
$( window ).unbind( 'resize', fire ); 🎜>elems = null;
}
};
var fire = function( e ){
loader( $(this),
); / バインドイベント
コンテナ = イベント === 'スクロール' ? コンテナ : $( this );
container.bind(event, fire );
$( window ).bind( 'resize', fire );
/ / 初期化
loader();
})( jQuery );これは次のとおりです。
attr string
HTML に対応する、画像の実際のアドレスを格納する属性名。デフォルトは Lazy-src です。
コンテナ dom & セレクタ
デフォルトのコンテナはウィンドウで、コンテナはカスタマイズできます。
event starng
画像の読み込みをトリガーするイベントの種類、デフォルトは window.onscroll イベント
fadeIn boolean
jQuery の fadeIn 効果を使用して表示するかどうか、デフォルトは false です。
しきい値
画像から指定された距離までスクロールするとページがロードされます。デフォルトは 0 です。
vertical boolean
水平にスクロールするかどうか。デフォルトは true (垂直) です。
loadScript (関数の拡張版) boolean
JavaScript の広告画像をブロックせずに読み込むかどうか。デフォルトは false です。

注：転載の際は出典を明記してください。著者：エイリアンアカデミー