CakePHPで画像の遅延ロード

画像を遅延読み込みする時のメモ。画像を多く扱うページの表示速度改善を目的に。実際に、ページを開いた時の読み込みサイズ・リクエスト数が減り、ページの表示スピードが改善されました。待ち時間のストレス減少を期待してローディング画像も入れてみました。読み込んだあとにスクロールしていると、読み込み後の画像が再読み込みされるようなチラつきがあったので、クラス名を削除する処理を追加しました。

画像の遅延ロード

echo $this->Html->image('loading.gif', array('class' => 'loading'));
echo $this->Html->image('transparent.png',  array('class' => 'lazy', 'data-original' => $this->Html->image('sample.jpg')));
$(function() {
    $("img.lazy").lazyload({
        effect : 'fadeIn',
        effectspeed: 500,
        load: function() {
            $(this).removeClass("lazy").siblings(".loading").hide();
        }
    });
});

参考