javascript - 许多图像加载 HTML/Javascript 性能

Question

好吧，经过一番搜索并没有找到我正在寻找的真正答案后，我在这种情况下提出了以下问题:

我有一个交易网站，加载了大约 2300 个 37x50 的 PNG 图像两次，一次在左列，一次在右列。图像及其附带的所有信息都是使用 jQuery 在 onLoad 事件的文档中插入的。然而，加载 2300 张图像(即使 html 直接来自服务器)需要太多时间，甚至会挂起新版本的 chrome!。因此，现在的快速解决方案就是删除图像并在动态工具提示中显示。效果很好，但引起了网站用户的愤怒，而且它确实很难看。

所以...我想到了一些可能的解决方案，但我不知道这里的好/坏做法是什么:

• 将所有图像设为 JPEG 并降低质量。
• 无论是否使用上述内容:将所有图像添加到 1 个非常大的图像中，加载它并根据数组中的位置绘制 4600 个 Canvas ，如 'imageArray["someimageID"] = { x = 0, y = 40 }'
• 将所有图像转换为 Base64，将它们添加到数组 'imageArray["someimageID"] = "base64"' 中并绘制 4600 个 Canvas 。

在某种程度上，我还必须考虑到，在所有 2300 张图像中，我有小、中、大版本。 (其中只有小的，37x40，在一个页面中一起显示)

希望就如何正确解决此类问题获得一些很好的见解!

问候

Answer 1

如果您的图像是静态的(不是为每个请求生成)，我认为您应该使用 CSS Sprite 。 (类似于您自己对大量 Canvas 的建议)。

基本上，您为要显示的每个图像(或其他一些容器元素)创建一个 div，并在其上设置一个背景，该背景占据包含所有图像的大图像的一小部分。

CSS 示例:

img.icon1
{
  width:50px;
  height:50px;
  background:url(spritesheet.png) 50 0;
}

在此示例中，50 和 0 表示 50x50 图标在 spritesheet 中的偏移量。

更新:这里http://css-tricks.com/css-sprites/这是一个比我的简单示例更进一步的解释。