大量图像的延迟加载

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());
        }
    });
});