Jquery.LazyLoad.js の改訂版をダウンロードして、画像の遅延読み込み plug-in_jquery を実装します。

インターネットからダウンロードしたバージョンには多かれ少なかれバグがあり、特に IE6 と IE7 でのロード後の画像の点滅は大きな問題で、長時間オンラインで検索しましたが、関連する解決策が見つかりませんでした。解決策がない場合は、DIY精神で自分たちで解決し、バグを分析し、アイデアを整理する必要があります。以前にポップアップウィンドウエフェクトを作成した方法と組み合わせて、互換性を解決しました。 Jquery.LazyLoad.js の問題について、アイデアと方法を紹介します。

解決策は大きく 2 点あります。1 つは、LazyLoad 自体のフィルター パラメーターから始めて、IE6 と IE7 で使用できるパラメーターである show を使用することです。 IE6 および IE7 の効果。次に、IE8 以降 (IE8 を含む)、FireFox、Chrome などの非 IE コア ブラウザはすべてフェードイン効果をサポートしているため、このクールな特殊効果はこれらのバージョンのブラウザで使用できます。

このアイデアが出た後、次の解決策を考えました。

1. 以下のブラウザであれば、まず JQ を使用してブラウザの種類とバージョンを確認します。 IE8 の場合は、effect= show を使用します。それ以外の場合は、effect=fadeIn を使用します。ブラウザのバージョンを確認する関数は次のとおりです。

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

function checkbrowse() {
var ua = navigator.userAgent.toLowerCase();
var is = (ua.match(/b(chrome) |opera|safari|msie|firefox)b/) || ['', 'mozilla'])[1];
var r = '(?:' は '|バージョン)[\/: ]([ \d.] )';
var v = (ua.match(new RegExp(r)) || [])[1];
jQuery.browser.is = です; .ver = v;
return {
'is': jQuery.browser.is,
'ver': jQuery.browser.ver
}
}

上記のコードを JQ パッケージに追加しました。将来の使用のために、パスは http://demo.jb51.net/js/2011/lazyload/Js/lazyload/jquery.js です。

2. ブラウザのバージョンに応じて異なるフィルター効果を表示するように Jquery.LazyLoad.js 関数を変更します。

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

var public = checkbrowse();
var showeffect = ""
if ((public['is'] == 'msie) ' && public['ver'] showeffect = "show"
} else {
showeffect = "fadeIn"
}
jQuery(document).ready( function( $) {
$("img").lazyload({
プレースホルダー: "http://demo.jb51.net/js/2011/lazyload/Js/lazyload/grey.gif",
effect: showeffect,
failurelimit: 10
})
});

Jquery.LazyLoad.js の使用手順:
1. 次のファイルを保存します。同じディレクトリ内 以下:
jquery.js
jquery.layzload.js
grey.gif
2. 特殊効果が必要な場所に次のコードを追加します:



Jquery.LazyLoad.js プラグイン改訂版のダウンロード:

lazyload.rar
Jquery.LazyLoad.js プラグイン パラメーターの詳細な説明:
次に、LazyLoad プラグの一部のパラメーターについて説明します。ユーザーが意思決定を行うための -in より関連性の高い効果。
1、事前にスペースを占有する画像を使用します。
プレースホルダー: "img/grey.gif"、
パラメータ: プレースホルダー、値は特定の画像パスです。この画像は次の目的で使用されます。ロードされる画像を占有します。位置、画像がロードされると、プレースホルダー画像は非表示になります

2、ロードに使用するエフェクト
effect: "fadeIn"、
パラメータ: effect (特殊効果)、値は show(直接表示)、fadeIn(フェードイン)、slideDown(ドロップダウン)などです。 よく使用される fadeIn

3、事前に読み込みを開始します
しきい値: 200、
パラメータ: しきい値。値はページの高さを表す数値です。200 に設定すると、スクロール バーがターゲット位置からまだ 200 メートル離れた時点で画像の読み込みが開始され、ユーザーの操作が妨げられる可能性があります。

4、イベントがトリガーされた場合にのみロードされます。
event: " click"、
パラメーター:event、値には click (クリック)、mouseover (マウス) が含まれます。 over)、sporty (スポーティ)、foobar (...)。マウスが上に移動しないか、クリックしても画像の読み込みが開始されないことがわかります。後の 2 つの値はテストされていません...
。
5、特定のコンテナ内の画像に対する効果を実現するため、
コンテナ: $("#container")、
パラメータ: コンテナ、値は特定のコンテナの遅延ロードのデフォルトでプルブラウジングが有効になります。特定の DIV のスクロール バーを引いたとき。

6. 画像が不規則に並べられている場合。デフォルトでは、lazyload は表示領域にない最初の画像を検出すると読み込みを続行しません。ただし、HTML コンテナが混乱している場合、Failurelimit は読み込み対象外となる可能性があります。 N 個の画像。この問題を回避するには、表示領域外の画像を使用します。