[jQuery]ブラウザ画面に表示された時に読み込みを開始するプラグイン「Lazyload」

テキストベースではなく、大量に画像を使用しているサイト、例えば、ギャラリーサイトなどでは、今回ご紹介するjQueryプラグインのLazyloadを利用すると、サーバの負荷を軽減することができます。

ダウンロード先:Lazy Load Plugin for jQuery

使用方法は非常に簡単です。

jQueryといっしょに上記のプラグインJavaScriptファイルを読み込みます。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>

パスはアップしている階層によって変更してください。

あとは、Lazyloadを有効にするため、下記のタグを書いておくだけです。

<script type="text/javascript">
 $(function() {
 $("img").lazyload();
});
</script>

大手サイト、たとえば、GIGAZINEさんとかでも使用されているので、こうしたサイトを運営する人はぜひ導入したほうがいいと思いますよ。

関連するWeb制作・開発Tips

関連リンク