Posted at

jQuery + jquery.lazyload + jquery.transit + iScroll4 でスクロールしながら画像の遅延ロード&表示アニメーションをちょっときれいに。

More than 5 years have passed since last update.

<script src="jquery.js" type="text/javascript" charset="utf-8"></script>

<script src="iscroll.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.lazyload.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.transit.js" type="text/javascript" charset="utf-8"></script>

jquery.lazyloadはスクロールイベントを監視しているので、

iScrollのスクロールでwindowのscrollを発火させる。

    new iScroll('scroller', {

useTransition: true,
onScrollMove: function () {
$(window).trigger('scroll');
}
});

Lazy Load後の表示でデフォルトのアニメーションを使うとMobile Safariではコマ落ちするので、jquery.transitのアニメーションに置き換える。

   $('target').lazyload({

effect : 'show',
effect_speed: 0,
appear: function()
{
$(this).css('opacity',0);

},
load: function()
{
$(this).transition({
'opacity': 0.999999
}, 250);
}
});