html×javascriptで画像遅延読み込み(lazyload)

どうも、はぐっです・ω・♪

今回は、

「html,javascriptで画像の遅延読み込み」

を実現させます！

Webサイトを制作したはいいけれど、
なんかこのサイト重い・・・
読み込み時間長くね・・・
これじゃあページ開ききるまでに訪問者が直帰しちゃうぜ・・・

なんてことを考えることがあるかと思います。

解決したい！

こんなとき、Webサイトの高速化手法はたくさんあり、できるだけすべてを行うことが大事ではあるのですが、 いっぱいありすぎて、記事一つには到底まとめられないです。

な、の、で

今回は、画像遅延読み込みに関して、一つ。

jquery.lazyload.js

github.com

これだー！

これは、ページ読み込み時に読み込ませる画像を必要分に抑えて、一旦ページ表示を行い、それと並行して残りの画像を読み込ませる、といったことを実現させるjavascriptです！

使い方は、

html

<img class="lazy" data-original="画像パス" />

javascript

$('.lazy').lazyload({
　// オプション
});

こうですね。(もちろんjquery使うっす)

んで、このオプションってところにいろいろ設定を入れ込むわけですな。

たとえば、

threshold: 閾値  
event: 読み込み発火イベント  

とか。

$('.lazy').lazyload({
  threshold: 1000,
  event: 'scroll'
});

こんな感じ。

ちなみに、任意のタイミングで読み込みを実行させたいときは、こんなのがあります。

eventに'sporty'を設定

$('.lazy').lazyload({
  event: 'sporty'
});

好きなタイミングで実行

$('.lazy').trigger('sporty');

これ、地味に使うと思う。

画像を大量に使用している場合は、スプライトにするという策と同時に、遅延読み込みも利用してWebサイトの高速化を目指しましょう！