画像の読み込みを遅延させるjQuery「LazyLoad with jQuery」
ファイルサイズの大きい画像を多用しているページやアクセスが集中するサイトは、画像の読み込みがレンダリングスピードに影響する割合は少なくありません。なるべく早く表示する為にも画像の読み込みは工夫したいとこですよね。
そこで、スクロールに合わせて画像を表示するjQuery「LazyLoad with jQuery」を試しに使ってみました。このブログにはあまり必要ないかなと思ったんですが、他の管理サイトで必要なので備忘録として初心者向けに設定方法を書き残しておきます。もしかしたらこのブログからは外すかもしれませんが。
jQueryをダウンロード
まず、以下の2つのスクリプトをダウンロードします。
jQuery (jquery.js)
Lazy Load Plugin for jQuery (jquery.lazyload.js)
ダウンロードしたスクリプトの拡張子を変更するやり方も、一応書いておきます。
メモ帳などにコピペ
保存時に拡張子(.js)を変更
ソース
以下のソースを記述すれば完了です。
URLはアップロード先に書き換えてください。「images/lazyload.png」はまだ読み込んでない画像の代替画像です。小さなファイルサイズのものを適当に入れています。
他にも表示方法を変えられるオプションが用意されています。
Event to trigger loading
表示方法。デフォルトはscroll。
$("img").lazyload({ placeholder : "img/grey.gif", event : "click" });
threshold
表示前に読み込むピクセル数。デフォルトは0
$("img").lazyload({ threshold : 200 });
サンプルを詳しく見たい方はこちらからどうぞ。
この記事にトラックバックする(FC2ブログユーザー)