jquery を使用して実装された画像遅延読み込みプラグイン (画像遅延読み込み原理を含む)_jquery

画像の遅延読み込みは遅延読み込みとも呼ばれます。通常、ページに多くの画像があり、ページの高さまたは幅が複数の画面に及ぶ場合、ページが最初に読み込まれるときは画像のみが読み込まれます。ページがスクロールしているときに、画像が読み込まれる前に表示領域に入ることで、ページの読み込み速度が大幅に向上し、同時の画像リクエストが減ることでサーバーへの負荷も軽減されます。ユーザーが最初の画面にのみ留まる場合は、データを保存することもできます。 TAB に多くの画像がある場合は、TAB にも適用でき、TAB がトリガーされたときに画像がロードされます。

画像の遅延読み込みの原理は比較的単純です。まず、画像の実際のアドレスをカスタム属性 (lazy-src) にキャッシュし、ソース アドレスに 1×1 の完全に透明なプレースホルダー画像を使用します。もちろん、代わりに、プレースホルダー画像を別の画像にすることもできます。

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

画像の読み込みには JavaScript が使用されるため、ユーザーが JavaScript を無効にしている場合は、代替手段を設定できます。

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

ページが最初にロードされると、ページ内の画像の位置が取得されてキャッシュされます (オフセットの値が取得されるたびに、ページのリフローがトリガーされます)。表示領域が計算され、位置が取得されると、画像のファイルが表示領域に表示され、src の値が実際のアドレスに置き換えられ、画像の読み込みが開始されます。

ページがスクロールすると、キャッシュされた画像の位置値が表示領域に表示されるかどうかが判断され、代わりに src がロードされます。すべてのイメージがロードされると、繰り返しの操作によって引き起こされるメモリ リークを避けるために、対応するトリガー イベントがアンロードされます。ウィンドウ全体を大きなコンテナと考えると、ページ内に小さなコンテナを設定することもでき、小さなコンテナに画像の遅延読み込みを実装することもできます。

以下は、jQuery プラグインとして作成した実装コードです。

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

(function( $ ){
$.fn.imglazyload = function( options ){
 var o = $.extend({
    attr  :   'lazy-src',
    container  :  window, 
    event   :  'scroll',    
    fadeIn      :   false,    
    threshold  :  0, 
    vertical  :  true 
   }, options ),

  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 = vertical ? 'scrollTop' : 'scrollLeft',   
  winSize = vertical ? container.height() : container.width(),
  scrollCoord = container[ SCROLL ](),
  docSize = winSize + scrollCoord;

 // 延迟加载的触发器 
 var trigger = {

  init : function( coord ){
   return coord >= scrollCoord &&
                            coord   },

  scroll : function( coord ){
   var scrollCoord = container[ SCROLL ]();
   return coord >= scrollCoord &&
                    coord   },

  resize : function( coord ){
   var scrollCoord = container[ SCROLL ](),
    winSize = vertical ?
                            container.height() :
                            container.width();
   return coord >= scrollCoord &&
                   coord   }
 };

 var loader = function( triggerElem, event ){
  var i = 0,
   isCustom = false,
   isTrigger, coord, elem, $elem, lazySrc;

  // 自定义事件只要触发即可，无需再判断
  if( event ){
   if( event !== 'scroll' && event !== 'resize' ){
    isCustom = true;
   }
  }
  else{
   event = 'init';
  }

  for( ; i    isTrigger = false;
   elem = elems[i];
   $elem = $( elem );
   lazySrc = $elem.attr( o.attr );

   if( !lazySrc || elem.src === lazySrc ){
    continue;
   }
   // 先从缓存获取offset值，缓存中没有才获取计算值,
   // 将计算值缓存，避免重复获取引起的reflow
   coord = $elem.data( dataName );

   if( coord === undefined ){
    coord = $elem.offset()[ OFFSET ];
    $elem.data( dataName, coord );
   }

   isTrigger = isCustom || trigger[ event ]( 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(event, fire );
}
else{
container.unbind( o.event, fire );
}
$( window ).unbind( 'resize', fire );
elems = null;
}

};

var fire = function( e ){
loader( $(this), e.type );
};

//バインドイベント
コンテナ = イベント === 'スクロール' ? コンテナ : $( this );
コンテナ.bind( イベント, fire );
$( window ).bind( 'resize' , fire ) ;

// 初期化
loader();

これを返します;
};

})( jQuery );

呼び出し:

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

$ ( 'img ' ).imglazyload({
event : 'scroll',
attr : 'lazy-src'
});

デフォルトの呼び出しではすべてのパラメータを省略できます。

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

$( 'img' ).imglazyload();

画像の遅延読み込み用のプラグイン API の説明:

attr string
HTML に対応する画像の実際のアドレスを格納する属性名。デフォルトは Lazy-src です。

コンテナー dom & セレクター
デフォルトのコンテナーはウィンドウであり、コンテナーはカスタマイズできます。

eventstirng
画像の読み込みをトリガーするイベントタイプ、デフォルトは window.onscrollevent

fadeIn boolean
jQuery の fadeIn 効果を使用して表示するかどうか。デフォルトは false です。

しきい値
画像から指定された距離までスクロールするとページがロードされます。デフォルトは 0 です。

vertical boolean
水平にスクロールするかどうか。デフォルトは true (垂直) です。

loadScript (関数の拡張版) boolean
JavaScript の広告画像をブロックせずに読み込むかどうか。デフォルトは false です。