非同期ロードを含むページの画像 & 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させちゃえばいいんだけどね・・・