在性能方面，在页面上显示1000张图像的最佳方法是什么？ [英] In terms of performance, what is the best method to show 1000 images on a page?

问题描述

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

I'm trying to show 1000 quite small images on a page (rather a lot indeed but out of my control).

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

When loading them all at once, the performance obviously suffers drastically rendering 1000 images at once.

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

I tried implementing applying the image src upon scroll (at numerous amounts - 250px scroll, 25 images load etc.), then tried loading the images on a timer.

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

These methods did help to increase performance but what would be the most efficient way to do this? They seemed to still have an irritating amount of lag - I understand there is a fundamental problem with rendering that many images on one page, but is there a better solution?

编辑：

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

Pagination of course would help but isn't an option here. Also, the images are pulled from an API so it's not convenient to make 1 large image / use sprites.

推荐答案

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

Since sprites/pagination weren't an option in this situation, I found the following the best solution:

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

Adapting the 'load images on scroll' method, with some tweaks and cruically setting the parent element for each image (so there are 1000 elements, each with images) to display:none.

With父元素默认为 display：none &同时制作前25 显示：块：

With the parent elements defaulted to display:none & also making the first 25 display:block:

var scrollPos = 0;
var endEle = 0;

var scrollPos = 0; var endEle = 0;

$（窗口）.scroll（function（）{

$(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 并将< img role> 切换为< src> （图片网址为每次用户滚动250px时，在呈现页面时放入角色。

This sets the next 50 elements to display:block and switches the <img role> into <src> (the image urls were put into role when the page is rendered) every time the user scrolls 250px.

这篇关于在性能方面，在页面上显示1000张图像的最佳方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！