Jquery_jquery を使用して画像のプリロードと遅延ロードを実装する方法-jsチュートリアル-php.cn

Jquery_jquery を使用して画像のプリロードと遅延ロードを実装する方法

WBOY

リリース： 2016-05-16 16:25:19

オリジナル

1002 人が閲覧しました

この記事の例では、Jquery が画像のプリロードと遅延ロードを実装する方法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

画像のロード後に対応する操作を実行するか、画像のロードを遅らせるかを決定する必要があるプロジェクトは数多くあります。インターネット上にはすでに非常に優れたプラグインがありますが、常に少しぎこちなく感じます。これらのエフェクトには別のプラグインをロードする必要があるので、とても楽なので、自分でメソッドを書きました。

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

function loadimg(arr,funLoading,funOnLoad,funOnError){

var numLoaded=0,

numError=0,

isObject=Object.prototype.toString.call(arr)==="[オブジェクト オブジェクト]" ? true : false;

var arr=isObject ? arr.get() : arr;

for(arr){

var src=isObject ? $(arr[a]).attr("data-src") : arr[a];

preload(src,arr[a]);

}

関数 preload(src,obj){

var img=新しい画像();

img.onload=function(){

numLoaded ;

funLoading && funLoading(numLoaded,arr.length,src,obj);

funOnLoad && numLoaded==arr.length && funOnLoad(numError);

};

img.onerror=function(){

numLoaded ;

numError ;

funOnError && funOnError(numLoaded,arr.length,src,obj);

}

img.src=src;

}

}

パラメータの説明:

arr: 画像パスを格納する配列、または選択した画像の jquery オブジェクトにすることができます。 funLoading: 個々の画像がロードされた後に実行される操作
funOnLoad: すべての画像がロードされた後の操作
funOnError: 画像単体読み込みエラー発生時の動作。

例:

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

var imgonload=function(errors){

/*errors: 読み込みエラーのある画像の数;*/

console.log("読み込み済み," エラー " 画像読み込みエラー!");

}

var funload=function(n,total,src,obj){

/*

n: ロードされたアイテムの数 

total: ロードされる画像の合計数 

現在のロードされたイメージパスを使用します
obj:loadimg 関数で渡された arr が画像パスを格​​納する配列の場合、obj=src は画像パス、

arr が jquery オブジェクトの場合、obj は現在ロードされている img dom オブジェクトです。 

*/

console.log(n "/" 合計 " 写真が読み込まれました。",src);

var newimg = document.createElement("img");

newimg.src=src;

$("body").append(newimg).fadeIn();

}

var fload_obj=function(n,total,src,obj){

console.log(n "/" 合計 " 写真が読み込まれました。",src);

$(obj).attr("src",src);

$(obj).fadeIn(200);

}

var funOnError=function(n,total,src,obj){

console.log("" n "st img ロード エラー!");

}

呼び出し例:

コードをコピーコードは次のとおりです:console.log("loading...");

loadimg($("img"),funload_obj,imgonload,funOnError);

/*loadimg(["http://pic22.nipic.com/20120619/9607634_212642465144_2.jpg",

"/20120531/1670912_103610084349_2.jpg",

"/20120616/4952071_130629530136_2.jpg",

"/20120610/1723580_105037029000_2.jpg",

"http://pic22.nipic.com/20120617/2572038_125013326121_2.jpg"

],funload,imgonload,funOnError);*/

以上が本来の書き方です。 次にLazy Load

をベースに画像を遅延読み込みするためのjQueryプラグインを紹介します。
Lazy Load は jQuery に依存します。次のコードをページの先頭領域に追加してください:

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

HTML コードを変更する必要があります。src 属性にブースのシンボル画像を設定する必要があります。また、実際の画像の URL を data-original 属性に設定する必要があります。特定のクラスを使用して遅延読み込み Image オブジェクトを取得すると、プラグインバインディングを簡単に制御できます。

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

画像を処理するコードは以下の通りです。

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

$("img.lazy").lazyload();

これにより、lazy クラスを持つすべての画像が遅延してロードされます。基本的なオプションのデモを参照してください。

感度を設定します

JavaScript はほとんどすべてのブラウザで有効になっていますが、ブラウザが JavaScript をサポートしていない場合でも、実際の画像を正常に表示するには、実際の画像フラグメント

プレースホルダーは CSS を介して非表示にすることができます。

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

.lazy {

表示: なし;

}

JavaScript をサポートするブラウザでは、DOM の準備ができたらプレースホルダーを表示する必要があります。これはプラグインの初期化と同時に行うことができます。

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

$("img.lazy").show().lazyload( );

これらはオプションですが、プラグインを正常にダウングレードしたい場合は実行する必要があります。

感度を設定します

デフォルトでは、画像が画面に表示されるときにロードされます。事前に画像をロードしたい場合は、しきい値オプションを 200 に設定して、200 のときに画像を事前にロードすることができます。画面からピクセル離れています

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

$("img.lazy").lazyload({ しきい値 : 200 });

プレースホルダー画像

プレースホルダー画像を設定し、読み込みアクションをトリガーするイベントを定義することもできます。この時点では、透明、グレー、白の 1x1 ピクセル画像が既にプラグインに含まれています。

イベントトリガーによる読み込み

イベントには、クリックやマウスオーバーなどの任意の jQuery イベントを使用できます。また、スポーティーや foobar などのカスタムイベントも使用できます。デフォルトでは、ユーザーがの位置までスクロールするまで待機状態になります。ウィンドウ上の画像はグレーで表示されます。クリックされるまでプレースホルダー画像が読み込まれないようにするには、次のようにします。

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

$("img").lazyload({

プレースホルダー: "img/grey.gif",

イベント:「クリック」

});

特殊効果を使用する
画像が完全にロードされると、プラグインはデフォルトで show() メソッドを使用して画像を表示します。実際、次のコードでは FadeIn エフェクトを使用します。効果デモページです

。

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

$("img.lazy").lazyload({

効果:「フェードイン」
});

画像はコンテナ内です

スクロールバーのある DIV 要素など、スクロール可能なコンテナー内の画像でプラグインを使用できます。必要なのは、コンテナーを jQuery オブジェクトとして定義し、それをパラメーターとして初期化メソッドに渡すことだけです。水平スクロールのデモページと垂直スクロールのデモページ。

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

#container {

高さ: 600px;

オーバーフロー: スクロール;

}

$("img.lazy").lazyload({ 

コンテナ: $("#container")

});

写真の順番が整わない場合

ページをスクロールすると、Lazy Load はロードされた画像をループし、その画像が表示領域内にあるかどうかを検出します。デフォルトでは、最初の画像が表示領域内にないときにループが停止します。画像は流動的に分散されていると見なされ、ページ内の画像の順序は HTML コード内の順序と同じですが、一部のレイアウトではこの仮定は当てはまりません。ただし、読み込み動作を制御できます。失敗制限オプション

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

$("img.lazy").lazyload({ 

失敗制限 : 10

});

表示領域にない 10 個の画像を見つけた後にプラグインが検索を停止するように、failurelimit を 10 に設定します。レイアウトが面倒な場合は、このパラメータを高く設定してください。

画像の遅延読み込み

Lazy Load プラグインの不完全な機能ですが、画像の遅延読み込みを実装するために使用することもできます。次のコードは、ページが読み込まれてから 5 秒後に画像を読み込みます。指定した領域が自動的にロードされます。これは遅延ロードのデモページです。

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

$(function() { 

$("img:below-the-fold").lazyload({

イベント: 「スポーティ」

});

});

$(window).bind("load", function() { 

var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")}, 5000);

});

隠し画像を読み込み中

たとえば、プラグインを使用してリストをフィルタリングする場合、パフォーマンスを向上させるために、リスト内の各項目の表示ステータスを継続的に変更できます。デフォルトでは、ロードは非表示の画像を無視します。非表示の画像をロードしたい場合は、skip_invisible を false
に設定してください。

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

$("img.lazy").lazyload({ 

Skip_invisible : false

});

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。