Jquery.LazyLoad.jsプラグイン修正版ダウンロード、ピクチャ遅延ロード特効を実現
3487 ワード
これまでJqueryに注目していました.LazyLoad.jsという特効は、ずっと役に立たないので、ここ数日研究して、実際に応用して、サイトSEO方面には何の役にも立たないが、いくつかの流量を節約することができて、大きなウェブサイトにとって特に重要で、どれだけの流量を節約したかについては統計がつかない.ネットからダウンロードしたバージョンは多少バグがありますが、特にロード後にIE 6とIE 7の下で画像が点滅するのは大きな問題で、ネットで長い間調べても解決策が見つかりませんでした.解决方案がなくて、私达DIYの精神を発挥しなければならなくて、自分の考えは解决して、BUGを分析して、理の考え方を整理して、前の时间と私を结び付けてウィンドウの特効の方法を弾いて、Jqueryを解决しました.LazyLoad.jsの互換性の問題は、考え方と方法を皆さんと共有します.解決の構想は大体2点で、1つはLazyLoad自身のフィルタパラメータから着手して、1つのパラメータがIE 6とIE 7で使うことができることを発見して、showで、それではIE 6とIE 7の下でこの特効を使います;二つ目は、IE 8以上(IE 8を含む)、FireFox、Chromeなどの非IEコアのブラウザがfadeIn特効をサポートしているので、これらのバージョンのブラウザではこのようなクールな特効が使用されています.1、まずJQでブラウザのタイプとバージョンを判断し、IE 8以下のブラウザであればeffect=showを使い、そうでなければeffect=fadeInを使い、ブラウザのバージョン関数を以下のように判断する.
私は以上のコードをJQパッケージに入れて、便利に後で使用して、経路はhttp://www.cookseo.com/themes/daniel/script/lazyload/jquery.js. 2、Jqueryを改造する.LazyLoad.js関数は、ブラウザのバージョンに応じて異なるフィルタ効果を表示します.
Jquery.LazyLoad.jsの使い方:1、次のファイルを同じディレクトリの下に保存する:jquery.js jquery.layzload.js grey.gif 2、特効が必要なところに以下のコードを加える.
Jquery.LazyLoad.jsプラグイン修正版ダウンロード:lazyload.rar Jquery.LazyLoad.jsプラグインパラメータの詳細:LazyLoadプラグインのいくつかのパラメータについて説明し、使用者がより適切な効果を得ることができます.1,画像でplaceholder:“img/grey.gif”,パラメータ:placeholder,値はある画像経路である.この画像はロードする画像の位置を占有するために使用され、画像がロードされると、ビットマップは2を非表示にし、ロードにはどのような効果effect:“fadeIn”、パラメータ:effect(特効)、値はshow(直接表示)、fadeIn(フェードイン)、slideDown(ドロップダウン)などが使用され、よくfadeIn 3が使用され、threshold:200、パラメータ:threshold、値は数字で、ページの高さを表す.200に設定と、スクロールバーが目標位置から200の高さがあるときに画像のロードを開始することを示す、ユーザに気づかれないようにすることができる.4,イベントトリガ時にevent:“click”をロードし、パラメータ:event、値はclick(クリック)、mouseover(マウスで漕ぐ)、sporty(運動する)、foobar(...)である.マウスが画像をクリックしてからロードを開始することができ、後の2つの値はテストされていない...5、ある容器の中の画像に対して効果container:$("#container")、パラメータ:container、値はある容器である.Lazyloadのデフォルトはブラウザのスクロールバーを引っ張るときに有効です.このパラメータは、DIVのスクロールバーを引っ張るときに、画像6を順番にロードすることができます.画像のソートが混乱しているとき、failurelimit:10、パラメータ:failurelimit、値は数値です.Lazyloadのデフォルトでは、最初の可視領域にない画像が見つかった場合はロードを継続しないが、HTMLコンテナが混乱すると可視領域内の画像がロードされていない場合があり、failurelimitは、この問題を回避するために、可視領域外の画像をN枚ロードすることを意図する.
function checkbrowse() {
var ua = navigator.userAgent.toLowerCase();
var is = (ua.match(/\b(chrome|opera|safari|msie|firefox)\b/) || ['', 'mozilla'])[1];
var r = '(?:' + is + '|version)[\\/: ]([\\d.]+)';
var v = (ua.match(new RegExp(r)) || [])[1];
jQuery.browser.is = is;
jQuery.browser.ver = v;
return {
'is': jQuery.browser.is,
'ver': jQuery.browser.ver
}
} 私は以上のコードをJQパッケージに入れて、便利に後で使用して、経路はhttp://www.cookseo.com/themes/daniel/script/lazyload/jquery.js. 2、Jqueryを改造する.LazyLoad.js関数は、ブラウザのバージョンに応じて異なるフィルタ効果を表示します.
var public = checkbrowse();
var showeffect = "";
if ((public['is'] == 'msie' && public['ver'] < 8.0)) {
showeffect = "show"
} else {
showeffect = "fadeIn"
}
jQuery(document).ready(function($) {
$("img").lazyload({
placeholder: "http://www.cookseo.com/themes/daniel/script/lazyload/grey.gif",
effect: showeffect,
failurelimit: 10
})
}); Jquery.LazyLoad.jsの使い方:1、次のファイルを同じディレクトリの下に保存する:jquery.js jquery.layzload.js grey.gif 2、特効が必要なところに以下のコードを加える.
<script type="text/javascript" src="/http://www.cookseo.com/themes/daniel/script/lazyload/jquery.js"></script>
<script type="text/javascript" src="http://www.cookseo.com/themes/daniel/script/lazyload/jquery.lazyload.js"></script> Jquery.LazyLoad.jsプラグイン修正版ダウンロード:lazyload.rar Jquery.LazyLoad.jsプラグインパラメータの詳細:LazyLoadプラグインのいくつかのパラメータについて説明し、使用者がより適切な効果を得ることができます.1,画像でplaceholder:“img/grey.gif”,パラメータ:placeholder,値はある画像経路である.この画像はロードする画像の位置を占有するために使用され、画像がロードされると、ビットマップは2を非表示にし、ロードにはどのような効果effect:“fadeIn”、パラメータ:effect(特効)、値はshow(直接表示)、fadeIn(フェードイン)、slideDown(ドロップダウン)などが使用され、よくfadeIn 3が使用され、threshold:200、パラメータ:threshold、値は数字で、ページの高さを表す.200に設定と、スクロールバーが目標位置から200の高さがあるときに画像のロードを開始することを示す、ユーザに気づかれないようにすることができる.4,イベントトリガ時にevent:“click”をロードし、パラメータ:event、値はclick(クリック)、mouseover(マウスで漕ぐ)、sporty(運動する)、foobar(...)である.マウスが画像をクリックしてからロードを開始することができ、後の2つの値はテストされていない...5、ある容器の中の画像に対して効果container:$("#container")、パラメータ:container、値はある容器である.Lazyloadのデフォルトはブラウザのスクロールバーを引っ張るときに有効です.このパラメータは、DIVのスクロールバーを引っ張るときに、画像6を順番にロードすることができます.画像のソートが混乱しているとき、failurelimit:10、パラメータ:failurelimit、値は数値です.Lazyloadのデフォルトでは、最初の可視領域にない画像が見つかった場合はロードを継続しないが、HTMLコンテナが混乱すると可視領域内の画像がロードされていない場合があり、failurelimitは、この問題を回避するために、可視領域外の画像をN枚ロードすることを意図する.