Demo lazyload - scrollstop

下にスクロールしたタイミングでスクリーンに表示される画像がロードされます。

HTML

<img class="lazy" data-original="img/example.jpg"  src="img/gif-load.gif">

javascript

<script src="js/jquery.min.js"></script>
<script src="js/jquery.lazyload.min.js"></script>
<script src="js/jquery.scrollstop.min.js"></script>

<script type="text/javascript" charset="utf-8">
$(function() {
$("img.lazy").lazyload({
event: "scrollstop"
});
});

サイト表示が遅い

画像読み込みのためにサイト表示が遅い問題を解決しようと二人は奔走したが解決することができない。

当てもなく彷徨う二人

疲れ果てた二人は公園で休むことした。どうすれば、画像の遅延読み込みを実現し、ユーザーに快適なサイトが作れるのか。。。

あそこを見ろ!ゆうせい!!

竜弥は公園で楽しいそうにスマートフォンを操作する女性を指さした。

スマートフォンを操作する女性

女性は楽しそうにスマートフォンでネットサーフィンをしている。wifi環境のない公園で。もしや!?画像遅延読み込みを実装したサイトを見てるのでは!?

そっと近づいてみる

ここからじゃ見えないなー。あんなに楽しそうに何を見ているんだ!?画像遅延読み込みをしているサイトを見ているのか!?

ヤバい!逃げられる!!

二人に気づいた「スマートフォンを操作する女性」は足早に公園を立ち去ろうとする。

待ってくれー!!

追走に気づいた女性は信じられない速さで公園を後にした。

竜弥:「怪しい者じゃない!!待ってくれー。」

途方に暮れる二人

唯一の手掛かりである「スマートフォンを操作する女性」を逃してしまった二人。再び当てもなく彷徨うことになるのだろうか。いったい!?いつになったら画像遅延読み込みの方法を手に入れることができるんだ!?ゆうせいは憤慨していた。

そんな時、竜弥に電話が。。。

イギリスに留学しているクリスティーナが噂を聞いて連絡を寄越してくれたのだ。

クリスティーナ:「画像遅延読み込みの方法は知ってるわ。3時に私の家に来て♡」

クリスティーナ

サイトが表示されるときは普通、画像を含むすべてのコンテンツを読みこんでから表示されるわ。けれど、画像の多いサイトだと読みこむまでに時間がかかって、せっかく訪問してくれたユーザーが離脱してしまう。この問題を解決してくれるのが画像の遅延読み込み機能よ。この機能はjQueryのlazyloadで実現できるわ。機能を実装する方法は下のサイトに詳しく書かれているので読んでね♡。

lazyloadの使い方 - ChiyoPen