写真系のサイトには一般的に多くの画像が掲載されています。訪問者がそうしたサイトを開くと、たくさんの写真を読み込むため、表示まで時間がかかります。これはサイトのホストのトラフィックに大きく影響するうえ、訪問者側のCPU Timeも大きく増えてしまいます。ここでは、画像の読み込みを遅らせるjQueryプラグイン「Lazyload」を紹介します。つまり、サイトにアクセスしたときにすべての画像を一度に読み込むのではなく、一部だけを読み込みます。ブラウザのスクロールバーを動かすと「今見ている範囲の画像」を読み込むので、ページの表示速度が速くなるのです。

Lazyloadの情報：

  • jQueryと併用する必要があります
  • ブラウザでJavaScriptを有効にしておく必要があります
  • サンプルファイル：Box.net｜4Shared｜Google ｜Dropbox
lazyload.jsをダウンロードしたい方は、サンプルファイルをダウンロードしてください。中にlazyload.jsが入っています～

よく使う構文：

1. lazyload機能を読み込む：
$("img").lazyload();
2. 遅延読み込みの時間を設定する
$("img").lazyload({ threshold : 200 });
//200を遅延値（ミリ秒）に変更してください
3. 画像が読み込まれる前に表示する背景画像を設定する
$("img").lazyload({ placeholder : "圖片路徑" });
複数のパラメータを同時に使うには、カンマで区切ります。たとえば、遅延読み込みと背景画像を同時に使う場合は次のようになります。
$("img").lazyload({ placeholder : "img/grey.gif",threshold:200 });