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

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

WBOY

リリース： 2016-05-16 17:52:42

オリジナル

1150 人が閲覧しました

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

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

コードをコピーしますコードは次のとおりです。
画像の遅延読み込みプラグインコード
(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 です。

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

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