在性能方面，在一个页面上显示1000张图片的最佳方法是什么?

In terms of performance, what is the best method to show 1000 images on a page?

本文关键字：1000张 显示 是什么 方法 最佳 方面 性能 一个      更新时间：2023-09-26

我试图在一个页面上显示1000个相当小的图像(确实很多，但超出了我的控制)。

当一次加载所有图像时，一次渲染1000张图像的性能明显受到严重影响。

我尝试在滚动时应用图像src(在众多数量- 250px滚动，25图像加载等)，然后尝试在计时器上加载图像。

这些方法确实有助于提高性能，但最有效的方法是什么?他们似乎仍然有一个恼人的延迟量-我知道这是一个根本性的问题，在一个页面上呈现这么多图像，但有更好的解决方案吗?

编辑:

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

如果所有的图像都是唯一的文件，那么您将感受到通过建立多个连接来检索它们的巨大打击。你可以为所有项目创建一个"主"图像，然后创建1000个div，每个div有不同的类或id，然后在css中为每个定义背景偏移量。这个方法通常被称为css精灵。

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

您不能创建一个AJAX分页，根据页码动态加载图像吗?例如，每页25张图片。在请求第一个页面时，动态加载下一个页面，依此类推。这样，用户就不会注意到延迟。这就是你所能做的进一步提高性能!

从另一个角度回答:

你能在服务器端组合图像并以行形式呈现它们吗?虽然这可能只在某些情况下有效。

好吧，我认为最好的解决方案是呈现他们的用户看到他们。也就是你的滚动方式。这意味着只加载用户看到的图像数量，而不是一次加载所有图像。如果，如你所说，这是你无法控制的;那么使用页面是不可能的了?总的来说，那将是一个更好的方法。

那么多的图像必然会导致大量的延迟，因为它将使用大量的带宽和可能的内存。

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

调整'load images on scroll'方法，进行一些调整，并将每个图像的父元素(因此有1000个元素，每个都有图像)设置为display:none。

父元素默认为display:none &也使前25个display:block:

var scrollPos = 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>(当页面呈现时，图像url被放入role)。

相关文章：