JavaScript/jquery.lazyload - 画像を遅延ロード - kobapan @ wiki

jQuery の Lazy Load Plugin で画像ファイルを遅延読み込みする。
1ページに画像を沢山貼る場合は、必須。

DL

$ wget https://raw.githubusercontent.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js

問答無用で全画像を遅延ロード

jQuery で imgタグ全部の src 属性を書き換える。
html の img タグの記述は何も意識しなくてよい。

<script src="YOUR/PATH/TO/JS/jquery.js"></script>
<script src="YOUR/PATH/TO/JS/jquery.lazyload.min.js"></script>
<script language="JavaScript">
$(document).ready( function () {
    // lazyload img
    $('img').each(function () {
        $(this).attr('data-original', $(this).attr('src'))
            .attr('src','YOUR/dummy.png')
            .lazyload({effect: 'fadeIn',effectspeed: 2000});
    });
</script>
中略
<img src="example1.jpg">
<img src="example2.jpg">

画像を選んで遅延ロード

class属性で除外指定する。
html の 除外したい img タグだけ class を追加する。

<script src="YOUR/PATH/TO/JS/jquery.js"></script>
<script src="YOUR/PATH/TO/JS/jquery.lazyload.min.js"></script>
<script language="JavaScript">
$(document).ready( function () {
    // lazyload img
    $('img:not(img.nolazy)').each(function () { // img.nolazy を除外
        $(this).attr('data-original', $(this).attr('src'))
            .attr('src','YOUR/dummy.png')
            .lazyload({effect: 'fadeIn',effectspeed: 2000});
    });
</script>
中略
<img class="nolazy" src="example1.jpg"> <!-- そのまま表示される -->
<img src="example2.jpg"> <!-- 遅延表示される -->

dummy.png には 1px x 1px の透明や白画像を用意しておく。