我试图在一个页面上显示 1000 个非常小的图像（确实很多，但我无法控制）。
当一次加载它们时，性能显然会大大降低一次渲染 1000 张图像。
我尝试实现在滚动时应用图像 src（大量 - 250px 滚动，25 个图像加载等），然后尝试在计时器上加载图像。
这些方法确实有助于提高性能，但最有效的方法是什么？它们似乎仍然存在令人恼火的延迟 - 我知道在一个页面上呈现这么多图像存在一个根本问题，但有没有更好的解决方案？
编辑：
分页当然会有所帮助，但在这里不是一个选择。此外，图像是从 API 中提取的，因此制作 1 个大图像/使用精灵并不方便。
【问题讨论】：
标签： javascript jquery performance
如果所有图像都是唯一的文件，那么您会感受到建立多个连接以检索它们的巨大冲击。您可以创建所有项目的 1 个“主”图像，然后创建 1000 个 div，每个具有不同的类或 id，然后在 css 中为每个项目定义背景偏移。这种方法通常被称为 css sprites。
【讨论】：
你不能做一个 AJAX 分页，根据页码动态加载图像吗？例如，每页 25 张图像。在请求第一页时，您会动态加载下一页等等。这样一来，用户就不会注意到延迟。您可以做的就是进一步提高性能！
【讨论】：
这是另一个角度的答案：
您能否在服务器端合并图像并渲染它们？ 虽然这可能只在某些情况下有效。
【讨论】：
嗯，我认为最好的解决方案是在用户看到它们时呈现它们。即您的滚动方法。这意味着只加载用户看到的尽可能多的图像，而不是一次加载所有图像。如果，如你所说，这是你无法控制的；那么使用页面是不可能的？总的来说，这将是一个更好的方法。
这么多图像肯定会导致很多延迟，因为它会使用大量带宽和可能的内存。
【讨论】：
由于在这种情况下精灵/分页不是一个选项，我发现以下最佳解决方案：
调整“滚动加载图像”方法，进行一些调整并将每个图像的父元素（因此有 1000 个元素，每个元素都有图像）设置为 display:none。
父元素默认为display:none & 前25个display:block：
var 滚动位置 = 0; var endEle = 0;
$(window).scroll(function(){
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;
}
});
这会将接下来的 50 个元素设置为 display:block，并在每次用户滚动 250 像素时将 <img role> 切换为 <src>（在呈现页面时将图像 URL 放入 role）。
【讨论】：