在单页中渲染许多图像答案

【问题标题】：Render Many Images in Single Page在单页中渲染许多图像
【发布时间】：2013-12-18 03:11:59
【问题描述】：

我正在调查我们在使用 Web 表单时遇到的性能问题，并认为我最好在此征求一些意见。

此页面在服务器端加载时会检索 ID 值列表，然后使用这些 ID 值播种在加载事件结束时添加的 javascript 块。然后，javascript 循环遍历这些 ID，并为每个此类 ID 添加一个 img 元素，使用该 ID 设置 src 属性。

以前，由于只能显示找到的前 20 个此类图像的限制，这可以正常工作。企业现在希望消除这个限制，这意味着我们可以合理地看到数百个这样的图像，并且在测试时，页面需要花费非常长的时间来呈现所有这些 img 元素。

JS 的简化伪代码：

for (var i = 0; i < ids.length; i++) {
     var img = "<img src='some\path\'" + ids[i];
     //add img to document
}

就个人而言，我建议我们暂时保留限制，因为我们在此版本的开发周期中已经很晚了，但我想看看我们可以做些什么来加快速度.所有选项都在桌面上，我们只需要显示所有图像。是否有替代策略来处理这种情况？

如果有任何其他细节对您有帮助，请告诉我。
编辑
我忽略了需要加载所有这些图像的原因是该页面用于打印所有这些图像，因此分页不会真正起作用。我同意这不是一个很好的设计选择，但用户和/或企业主想要一个显示所有这些图像的打印友好页面。具有相同功能的“正常”页面确实使用了分页功能，并且表现出色。
EDIT 2
现在我回到办公室，我可以提供更多细节：

img 元素使用 aspx 页面作为它们的 src，实际的图像内容是从另一个页面中的数据库中检索的，并使用图像/png 的内容类型作为响应流回，所以这进一步减慢了速度，但鉴于当前的架构，这是必要的，因为我们只将这些图像存储在数据库中
这些图片的大小可能会有所不同，但一张图片需要几 MB 的大小并不少见

这些回复证实了我的想法：这不是一个好主意

【问题讨论】：

试试 jQuery.lazyload 或 jQuery.scrollLoading。
javascript 速度很快，但加载数百张图片需要很长时间。图像的大小是多少？文件类型？
您可以在 for 循环中添加简单的超时，以免一次全部加载...
您想按顺序加载它们吗？
数百兆的图像？绝对尝试说服企业重新考虑方法。我不确定打印不会有问题

标签： javascript jquery html asp.net

【解决方案1】：

要创建一个包含多张图片（数百张）以打印的快速加载页面，您不能在大分辨率下使用 png。

首先将所有图像转换为 jpg（保留原件），大小应刚好足以打印。

150dpi 应该足够了。

这意味着如果您将 2 张图像并排放在 20 厘米宽的纸上，500 像素就足以满足最大宽度。

所以每张图片大约 5-15kb

如果您在 1200 像素的相纸上打印。（但每张图像加载 30-40kb 需要更长的时间）

那么在大多数浏览器中，您可以使用英寸或厘米来创建漂亮的插图。

如果您想在一页上打印这些图像，您可以使用打包脚本来计算每个图像的最大尺寸。

喜欢这个

var best_square3=function(w,h,n){
 var s=Math.sqrt(w*h/n),c=Math.floor(w/s),r=Math.floor(h/s),t=c*r;
 while(t<=n){
  s--;
  c=Math.floor(w/s);
  r=Math.floor(h/s);
  t=c*r;
 }
 return [w,h,n,s,c,r,c*r,Math.floor(s),((100/w)*(w/c))+'%',((100/h)*(h/r))+'%'];
}

demo .... 点击结果框内的某处

http://jsfiddle.net/e7My4/1/

在这种情况下，您的图像可以小得多。所以最大 100px*100px。

我个人使用 php 和 fpdf 创建 pdf 以下载/打印每次我更新图像/db

编辑

由于您使用 aspx（多年来我不使用它），您需要找到一个 aspx 脚本来调整图像大小，然后再以较小的格式（就像我在上面告诉您的那样）以 jpg 格式输出图像，而您却没有不需要透明度。

【讨论】：

这可能不足以使其真正可用，但您的回答确实促使我尝试在 aspx 页面中切换到使用 jpeg，这确实对总时间和规模。我能够从一分钟半的 1.33 亿字节的 PNG 图像（用于 387 图像页面）到一分钟和 8100 万字节的 JPEG 图像。这至少给了我一些东西可以展示给企业。谢谢。

【解决方案2】：

不要一次全部显示。没有人可以一次合理地处理 100 张图像。使用某种分页机制，例如一次显示 10 张图像。

它可以是您自己的分页或十几个 jQuery 图像滑块/旋转器/画廊之一。

【讨论】：

查看我关于立即加载所有这些图像的原因的更新

【解决方案3】：

浏览器加载图片的速度受很多因素的限制，比如

浏览器将执行的最大并发 HTTP 请求数
图片大小
加载图像的延迟和连接速度
用户使用的特定浏览器
用户拥有的特定硬件

并发 HTTP 请求的最大数量通常是每个域。将图像放置在多个不同的域上将有助于解决这个瓶颈。这也是一个非常复杂的解决方案，我不建议您这样做（仅包括完整性选项）。

如果图像未进行最佳编码，您也许可以减小图像的大小。

您可以通过将图像放在 CDN（内容交付网络）上来减少延迟并提高连接速度。

归根结底，加载 100 张图片可能是一个糟糕的设计选择。

相反，请考虑根据用户需要动态加载其他图像。例如，如果这种行为是您在 Facebook 等网站上看到的无限滚动。

更新

当您加载页面并打算打印时，您可以关注我列表中的前三个要点。

您也可以考虑使用服务器端代码将所有图像渲染成一张大图像。这可能比打开数百个 HTTP 连接来检索单个图像要快。这种方法的缺点（除了额外的复杂性）是渲染的“巨型”图像不会被 CDN 缓存（缓存它没有任何好处。请求该组合的用户已经将它缓存在浏览器中，并且如果没有其他地理位置附近的用户可能会请求相同的精确图像组合，则没有任何好处。

如果您有数百张图像要打印在一个页面上（缩略图），请确保图像的大小不超过获得良好打印质量所需的大小。如果您的 PNG 每个只有几 MB，则它们可能方式对于打印质量的缩略图来说太大了。

【讨论】：