大量图像的延迟加载

Question

我有以下代码用于延迟加载图像：

$.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();

    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};

$(window).on('scroll', function() {
    $('.imgli').each(function(){
        if ($(this).isInViewport()) {
            $(this).attr("src", $(this).attr("data-src")).removeAttr('data-src');
        }
    });
});

它可以处理大约700张图像，但是我很有趣-20.000张图像（最大）呢？

有什么方法可以检查这个，而不必真正加载20.000张图像，因为目前我还没有那么多图像。

每个图像最大约100kb。

Answer 1

首先，尽管有点没有意义，但您始终可以将现有图像复制到20.000。

其次，您可以在图片每次出现在视口中时强制重新加载它。

$(window).on('scroll', function() {
    $('.imgli').each(function(){
        if ($(this).isInViewport()) {
            $(this).attr("src", $(this).attr("data-src") + "?" + $.now());
        }
    });
});

因此，您只需滚动页面即可查看每次在视口中显示图片时如何加载它们。

另外，避免使用$(this)超过必要的数量。

更好的方法是将其保存到变量。 这样可以节省内存。

$(window).on('scroll', function() {
    $('.imgli').each(function() {
        var image = $(this);
        if (image.isInViewport()) {
            image.attr("src", image.attr("data-src") + "?" + $.now());
        }
    });
});