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虽然有点无意义。

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

$(this)

因此，您只需滚动页面，即可看到图片每次出现在视口中时的加载方式。

另外使用$(window).on('scroll', function() { $('.imgli').each(function() { var image = $(this); if (image.isInViewport()) { image.attr("src", image.attr("data-src") + "?" + $.now()); } }); });以外的方式，而不是必要的。

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

a = '1,354,1116,4296,49888 2,2029 3,7092,12834,26651,52362'

b = ''
for i in a.split():
    for n, j in enumerate(i.split(',')):
        if n:
            print('{},{}'.format(i[0], j)) # or file.write()

延迟加载大量图像

1 个答案: