lazyloadのイベント発火

ページの速度を少しでも上げる為にlazyload.jsを導入して遅延読み込みをする。
ただ、既存のWebページに入れる際に要素が色々と絡まり合ってて上手くいかない事がある。

今回の場合はdisplay:noneでタブを制御に画像が入っている。
初期ロード時はページスクロール等で画像が遅延読み込みをするが、タブをクリックした際の挙動で非表示の要素が表示された際の画像がlazyloadに反応しない。
正確に言えば、マウススクロールのイベント入力待ちになっていて画面が動くと画像が遅延表示される。
なので、多分をクリックした際にイベント発火させるにはどうするか？

と言う事になる。

<li class="menu">表示メニュー1</li>
<li class="menu">表示メニュー2</li>
<li class="menu">表示メニュー3</li>
<li class="menu">表示メニュー4</li>

$(function(){
	$('.menu li').click(function(){
		$('img.lazy:visible').trigger('appear');
	});

メニュー要素のliをクリックした際のイベントを拾い、lazyの要素で表示となっているimgの発火をする。
と言うもの。
多分、タブメニュー系の画像はこれ覚えておくと今後も多様すると思う。