Question

我试图在一个页面上显示1000个非常小的图像（确实很多，但不在我的控制范围内）。

一次加载所有内容时，性能显然会同时大幅渲染1000张图像。

我尝试在滚动时实现应用图像src（大量 - 250px滚动，25个图像加载等），然后尝试在计时器上加载图像。

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

修改

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

Answer 1

如果所有图像都是唯一文件，那么您可以通过多个连接来检索它们。您可以创建所有项目的1个“主”图像，然后创建1000个div，每个div具有不同的类或ID，然后在css中为每个项定义背景偏移。这种方法通常被称为css sprites。

http://css-tricks.com/158-css-sprites/

Answer 2

难道你不能制作一个基于页码动态加载图像的AJAX分页吗？例如，每页25个图像。在请求第一页时，您动态加载下一页，依此类推。这样，用户就不会注意到延迟了。这就是你可以做的更进一步的改进！

Answer 3

以下是另一个角度的答案：

你可以将服务器端的图像组合在一起并在行中渲染它们吗？虽然这可能只适用于某些情况。

Answer 4

嗯，我认为最好的解决方案是在用户看到它们时渲染它们。即你的滚动方法。这意味着只加载用户看到的图像数量，而不是一次加载所有图像。如果，如你所说，它不受你的控制;然后使用页面是不可能的？这将是一个更好的方法。

许多图像无论如何都会导致很多延迟，因为它会使用大量的带宽和可能的内存。

Answer 5

由于sprites / pagination在这种情况下不是一种选择，我发现以下是最佳解决方案：

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

父元素默认为display:none＆amp;也是前25 display:block：

var scrollPos = 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;

    }

}）;

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

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

5 个答案: