具有大量图像的延迟加载

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

具有大量图像的延迟加载

lazy load with large number of images

javascript

lazy-loading