Question

好的，经过一番搜索，没有找到我想要的真正的anwser，我在这种情况下遇到了以下问题：

我有一个交易网站，可以加载大约2300张37x50的PNG图像两次，一次在左栏，一次在右栏。使用jQuery在onLoad事件上的文档中插入图像及其随附的所有信息。然而，加载2300张图片（即使html直接来自服务器）只花了太多时间甚至挂起新版本的chrome！。所以现在快速的解决方案就是删除图像并在动态工具提示中显示。工作得很好，但网站用户生气了，这确实很难看。

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

将所有图像设为JPEG并降低质量。
以上与否：将所有图像添加到1个非常大的图像中，加载并根据数组中的位置绘制4600个画布，如'imageArray [“someimageID”] = {x = 0，y = 40}'< / LI>
将所有图像转换为base64，将它们添加到数组'imageArray [“someimageID”] =“base64”'并绘制4600个画布。

在我必须想到的所有2300张图片中，我有一个小型，中型和大型版本。（其中只有小的，37x40，一起显示在页面中）

希望能够对如何正确解决这样的问题有一些很好的见解！

迎接

Answer 1

如果你的图像是静态的（不是为每个请求生成的）我认为你应该使用CSS sprites。（类似于你自己对很多画布的建议）。

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

示例css：

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

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

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

Answer 2

首先，考虑一下您是否真的需要这么多图像，并一次性加载到页面上。假设你做...

将所有图像设为JPEG并降低质量。

使用正确的格式来处理您的工作。 JPEG用于照片。我的猜测是，因为你有37x50像素的图像，你不会显示照片。在这种情况下，从文件大小的角度来看，PNG可能更小。它并不重要，因为你所拥有的速度问题可能是80％的浏览器时间，20％的网络时间。

以上与否：将所有图像添加到1个非常大的图像中，加载它并根据数组中的位置绘制4600个画布，例如＆＃39; imageArray [＆＃34; someimageID＆＃34;] = {x = 0，y = 40}＆＃39;

试一试，看看。我不认为这会对你有所帮助。画布将比简单图像具有更多的开销。

将所有图像转换为base64，将它们添加到数组中＆＃39; imageArray [＆＃34; someimageID＆＃34;] =＆＃34; base64＆＃34;＆＃39;并绘制4600幅画布。

不要这样做。您在文件大小上增加了33％的开销，而且负载问题主要出现在您的浏览器中。

你能做什么

真的再次质疑你是否需要这么多的图像。
使用多个主机名加载图像，减少网络请求。 image1.example.com，image2.example.com，image3.example.com等。这将允许并行提供更多网络请求。
使用您的开发人员工具验证问题的实际位置。我再次怀疑它主要是客户端。一旦你知道真正的问题，你可以直接解决它。

Answer 3

我建议你是否可以，创建一个非常低分辨率的图像精灵，可以放置它以使它看起来像所有东西都被加载，然后用适当的图像替换它。没有更好的代码/样本/你的图像包含什么/他们是动态的我无法给你一个解决方案的真正答案，但至少它可以引导你在正确的方向。

如果您的图像是静态的，这将正常工作，如果动态没有其他可以做的事情。我想你正在创建的网页的一些例子很棒

Answer 4

您遇到问题的原因只是大量的HTTP请求 - 您应该始终尽量减少这些请求。

就像其他人在这里说的那样，如果可能的话，你会想要使用spritesheet technique（听起来像是这样）。 spritesheet会将所有图像压缩为一个，删除2299个HTTP请求。

许多图像加载性能HTML / Javascript

4 个答案:

你能做什么