html×javascriptで画像遅延読み込み(lazyload)
どうも、はぐっです・ω・♪
今回は、
「html,javascriptで画像の遅延読み込み」
を実現させます!
Webサイトを制作したはいいけれど、
なんかこのサイト重い・・・
読み込み時間長くね・・・
これじゃあページ開ききるまでに訪問者が直帰しちゃうぜ・・・
なんてことを考えることがあるかと思います。
解決したい!
こんなとき、Webサイトの高速化手法はたくさんあり、できるだけすべてを行うことが大事ではあるのですが、 いっぱいありすぎて、記事一つには到底まとめられないです。
な、の、で
今回は、画像遅延読み込みに関して、一つ。
jquery.lazyload.js
これだー!
これは、ページ読み込み時に読み込ませる画像を必要分に抑えて、一旦ページ表示を行い、それと並行して残りの画像を読み込ませる、といったことを実現させるjavascriptです!
使い方は、
html
<img class="lazy" data-original="画像パス" />
$('.lazy').lazyload({ // オプション });
こうですね。(もちろんjquery使うっす)
んで、このオプションってところにいろいろ設定を入れ込むわけですな。
たとえば、
threshold: 閾値 event: 読み込み発火イベント
とか。
$('.lazy').lazyload({ threshold: 1000, event: 'scroll' });
こんな感じ。
ちなみに、任意のタイミングで読み込みを実行させたいときは、こんなのがあります。
eventに'sporty'を設定
$('.lazy').lazyload({ event: 'sporty' });
好きなタイミングで実行
$('.lazy').trigger('sporty');
これ、地味に使うと思う。
画像を大量に使用している場合は、スプライトにするという策と同時に、遅延読み込みも利用してWebサイトの高速化を目指しましょう!