javascript - 在单页中渲染多个图像

Question

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

此页面在服务器端加载时会检索 ID 值列表，然后使用这些值来为在加载事件结束时添加的 javascript block 设置种子。然后 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
}

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

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

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

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

Answer 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))+'%'];
}

演示....点击结果框内的某处

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

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

---

我个人使用 php 和 fpdf 创建 pdf 来下载/打印每次我更新图像/数据库

编辑

由于您使用的是 aspx(多年来我一直没有使用它)，您需要找到一个 aspx 脚本来调整图像的大小，然后再以较小的格式(就像我上面告诉您的那样)以 jpg 格式输出图像，因为您不这样做不需要透明度。