スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
RSSフィード twitter Google Bookmarks スポンサーサイトをはてなブックマークに登録 はてなブックマーク
タグ /

画像の読み込みを遅延させるjQuery「LazyLoad with jQuery」

LazyLoad with jQuery

ファイルサイズの大きい画像を多用しているページやアクセスが集中するサイトは、画像の読み込みがレンダリングスピードに影響する割合は少なくありません。なるべく早く表示する為にも画像の読み込みは工夫したいとこですよね。

そこで、スクロールに合わせて画像を表示するjQuery「LazyLoad with jQuery」を試しに使ってみました。このブログにはあまり必要ないかなと思ったんですが、他の管理サイトで必要なので備忘録として初心者向けに設定方法を書き残しておきます。もしかしたらこのブログからは外すかもしれませんが。

jQueryをダウンロード

まず、以下の2つのスクリプトをダウンロードします。

Source jQuery (jquery.js)

jQuery

Source Lazy Load Plugin for jQuery (jquery.lazyload.js)

Lazy Load Plugin for jQuery

ダウンロードしたスクリプトの拡張子を変更するやり方も、一応書いておきます。

メモ帳などにコピペ

スクリプトのダウンロード

保存時に拡張子(.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 });

サンプルを詳しく見たい方はこちらからどうぞ。

Source Lazy Load Plugin for jQuery

関連記事

RSSフィード twitter Google Bookmarks 画像の読み込みを遅延させるjQuery「LazyLoad with jQuery」をはてなブックマークに登録 はてなブックマーク
コメント一覧
コメントを残す


管理者にだけ表示を許可する

 | BLOG TOP | 

人気記事

スポンサードリンク

新着記事

プロフィール

日刊ウェブログ式を運営するナカタと申します。まだ開設して日も浅い拙いブログですが、どうぞよろしくお願いします。

リンク

LOOMICDESIGN

タグクラウド

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。