在性能方面，展示1000张图片的最佳方法是什么？

Question

我试图在页面上展示1000张相当小的图片（数量相当多，但超出了我的控制）。

一次性加载所有图片时，性能明显下降，需要同时渲染1000张图片。

我尝试了应用滚动时的图像 src（采用多个限度值-250px滚动，25张图片等），然后尝试按计时器加载图像。

这些方法确实有助于提高性能，但什么才是最有效的方法？他们仍然有一定程度的滞后-我理解在一个页面上呈现那么多图片存在根本性问题，但是否有更好的解决方案？

编辑：

分页当然可以帮助，但在这里不是一个选项。 另外，这些图片是从API中提取的，因此创建1个大图像/使用精灵并不方便。

- sgb

---

CSS精灵会对你有所帮助吗？ - Piskvor left the building

可能是懒加载插件，随着用户滚动加载图片？的重复问题。 - home

Answer 1

如果所有图片都是唯一的文件，那么您将因为需要建立多个连接来检索它们而感到压力。您可以创建一个包含所有项目的“主”图像，然后创建1000个不同类或ID的div，然后在css中为每个定义背景偏移量。这种方法通常称为CSS精灵。

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

- Jay Tomten

Answer 2

你能否制作一个基于页面数量动态加载图片的AJAX分页？例如，每页25张图片。在请求第一页时，你可以动态地加载下一页，以此类推。这样，用户就不会注意到延迟。这是你可以进一步提高性能的所有方法！

- ChrisH

Answer 3

这里有另一个角度的答案：

你可以在服务器端合并图像，然后以行的形式渲染它们，这样可能只适用于某些情况。

- Alex KeySmith

Answer 4

我认为最好的解决方案是按照用户所看到的方式呈现它们，即您的滚动方法。这意味着只加载用户已经看过的图片，而不是一次性加载所有图片。如果像你说的，它超出了你的控制范围，那么使用分页就不可能了吗？总体上这将是更好的方法。

那么多的图片必然会导致很多卡顿，因为它将使用大量的带宽和内存。

- Frank Allenby

Answer 5

由于在这种情况下，精灵/分页不是一个选项，我发现以下是最佳解决方案：

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

将父元素默认设置为display:none，并将前25个元素设置为display:block：

var scrollPos = 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，并在用户滚动250px时将<img role>切换到<src>（当页面呈现时，图像URL被放入role中）。

- sgb