アイテムが表示されているときに data-src を src に切り替えることで LazyLoading を実行する軽量コードを使用することを検討しています。基本的には、フルファットの LazyLoad を削減したものです。ここからのコード: http://luis-almeida.github.com/unveil/
(function( $ ) {
$.fn.unveil = function( threshold ) {
var $w = $( window ),
th = threshold || 0,
images = this,
loaded,
inview,
source;
this.one( "unveil", function(){
source = this.getAttribute( "data-src" );
this.setAttribute( "src", source );
this.removeAttribute( "data-src" );
} );
function unveil() {
inview = images.filter(function(){
var $e = $( this ),
wt = $w.scrollTop(),
wb = wt + $w.height(),
et = $e.offset().top,
eb = et + $e.height();
return eb >= wt - th && et <= wb + th;
});
loaded = inview.trigger( "unveil" );
images = images.not( loaded );
}
$w.scroll( unveil );
$w.resize( unveil );
unveil();
return this;
};
})( jQuery );
ただし、私の jQuery の知識はかなり限られているため、可視性チェックは scrollTop の垂直位置に基づいていることがわかります。
水平方向のjQueryツールのスクロール可能なdiv内に多数の製品があるeコマースストアの一部でこれを使用しようとしています。それらは画面の垂直部分内にあるため、すべての画像が読み込まれます。LazyLoad を使用しようとしましたが、機能しませんでした。
このコードを編集して、オーバーフローの右側の div 内の画像 (非表示) を関数が検出できるようにする方法を知っている人はいますか? 画像の位置は特定のポイントの右側ですか?