在性能方面,在页面上显示1000张图像的最佳方法是什么？

Question

我试图在一个页面上显示1000个非常小的图像(确实很多,但不受我的控制).

当一次加载它们时,性能显然会同时大幅渲染1000个图像.

我尝试在滚动时实现应用图像src(大量 - 250px滚动,25个图像加载等),然后尝试在计时器上加载图像.

这些方法确实有助于提高性能,但最有效的方法是什么？他们似乎仍然有一个令人烦恼的滞后 - 我知道在一个页面上渲染许多图像存在一个根本问题,但是有更好的解决方案吗？

编辑:

分页当然会有所帮助,但不是一个选择.此外,图像是从API中提取的,因此制作1张大图像/使用精灵并不方便.

Answer 1

由于在这种情况下不能选择精灵/分页，因此我发现以下最佳解决方案：

调整“滚动加载图像”方法，进行一些调整，并将每个图像的父元素（因此有 1000 个元素，每个元素都有图像）设置为display:none.

父元素默认为display:none& ，并且前 25 个display:block：

var 滚动位置 = 0; var endEle = 0;

$(窗口).scroll(函数(){

scrollPos = $(window).scrollTop();

    if  ($(window).scrollTop() < scrollPos + 250) {

       //load 15 images.

       $('.myDiv img').slice(endEle,endEle+50).each(function(obj){
            var self = $(this);
            var url = self.attr("role");
            self.attr("src", url);
            self.parent().css("display","block");
       });

       endEle = endEle + 50;

    }

});

每次用户滚动 250px 时，这会将接下来的 50 个元素设置为display:block并将其切换<img role>为（渲染页面时<src>放入的图像 URL ）。role