非同期ロードを含むページの画像 & overflow:hiddenとかのページ内スクロールコンテンツにもjquery.lazyload効かすメモ(長い
iframeみたいな、ページ内スクロールの方は標準で用意されてらった。
Plugin enabled on container
縦でも横でも、囲ってるクラスなりidなり指定すればオーケー。
指定したidとかの高さ取得して、スクロールで表示ってー仕組みかなーとか。
$("img.lazy").lazyload({ effect : "fadeIn", container: $("#container") });
コレで、#container内のimg(lazyクラス付加されてる)が延滞読込。
次はajax。
非同期で読み込んだimgにlazyload効かす。
$(function(){ $(document).ajaxStop(function(){ $("img.lazy").lazyload({ effect: "fadeIn" }).removeClass("lazy"); }); });
ajaxstopで、ページ内の非同期通信終了を取得できるそうで。
で、終了後lazyクラス付きのimgの処理を行うと。
最後のremoveClassは、他のlazyと分けるためと解釈しとります。
使う箇所少なければ、ajaxで引っ張ってくる処理の最後とかに.lazyloadさせちゃえばいいんだけどね・・・