2

我正在研究使用一些轻量级代码，我发现它通过在项目可见时将 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 Tool 可滚动 div 中有许多产品。由于它们位于屏幕的垂直部分，因此它会加载所有图像。我尝试使用 LazyLoad 但无法使其工作。

有谁知道如何编辑此代码，以便该函数可以检测到溢出中右侧的 div 中的图像（这是隐藏的），因此不应加载 - 即。图像的位置在某个点的右侧吗？

4

0 回答 0