マルチカラムのサイトで lazyload プラグインを使うときは右側から設定すべし
まずはこちらをご覧ください。
これは 2 カラム構成のサイトで、左と右のカラムの画像を lazyload するように設定してあります。 しかし、右側のカラムは既に読み込み開始してもいい位置にあるにも関わらず、なかなか読み込まれない状態にあります。
このときのソースコードは、以下のような構成でした。
<!-- HTML --> <!-- 左カラム --> <div id="column1"> <img class="lazyloaded" src="xxx" alt="xxx" /> ... </div> <!-- 右カラム --> <div id="column2"> <img class="lazyloaded" src="xxx" alt="xxx" /> ... </div>
// JavaScript $('img.lazyloaded').lazyload(); // まとめて設定(カラムを無視)
解決方法は、右カラムから順に lazyload() メソッドを設定することです。
// JavaScript $('#column2 img.lazyloaded').lazyload(); // 右カラム $('#column1 img.lazyloaded').lazyload(); // 左カラム
これで両方のカラムで同時に lazyload されるようになります。