ページの画像を非同期で読み込んでくれる「Lazy Load」

「LazyLoad Plugin」は、画像をページのロード時ではなく非同期に読み込んでくれるjQueryプラグインです。設定によりスクロールした際に画像をロードしたりしてくれます。
ダウンロード | デモ

スクリプト

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

実装

<img class="lazy" src="ダミー画像" data-original="画像URL">

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

Plugin has been tested with Safari 5.1, Safari 6, Chrome 20, Firefox 12 on OSX and Chrome 20, IE 8 and IE 9 on Windows and Safari 5.1 on iOS 5 both iPhone and iPad.

Related

テキストエリア カスタマイズ (スクロールバー,リサイズ,文字数制限) シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」 入力テキストの文字数をカウントしてくれる「Textchange」 テキストエリアを自動的にリサイズしてくれる「Autosize」 テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」 ローソク足チャート「jqPlot」 画像をモザイク処理(ピクセル化)してくれるプラグイン「Pixelate.js」 マウスオーバーでキャプション表示してくれる プラグイン