福島・埼玉のWEBサイト制作・ホームページ制作会社 キャスパーウゥブデザイン
MENU

Kyasper Note

この記事はNOTE(メモ)として作成された単一記事です。
2013年12月26日

jQueryプラグイン Lazyloadの実装

ページを表示したさいに、表示部分以外の画像の読込みをしないでページ表示速度をあげるjQueryプラグイン「Lazyload」の実装手順です。
読込みのさいに、フェード効果もつけられます。
WordPressのプラグインでも同じ機能のものもありますが、特定箇所だけ適用したい場合はこちらのほうが良いかもしれません。

1.Lazyloadのダウンロードと配置

http://www.appelsiini.net/projects/lazyloadのページの最下部「Download source or minified」からダウンロードができます。

ファイル名は適当に(ここでは「lazyload.js」としました)つけて、ディレクトリにアップロードします。

2.jQury・プラグインの読込み、コードの記述

<head><head>間に以下のコードを記述します。

3.効果を付けたい画像のコード

効果を付けたい画像に対して、以下のコードを記述します

注意と備考
  1. lazy.pngは疑似的に表示する画像で、1px × 1pxの画像を用意しました。
  2. data-orijinalに対して、実際の画像へのパスを記述します。
  3. widthとheightを記述しないとバグりやすいようです。
カテゴリー:
タグ: