Javascript 处理图像密集型网页

我有一个电视节目列表，大约有200个节目。每一个节目都有一个小图像，40x60像素和3KB，它们都同时列在同一页上

现在我开始想，每次查看页面时，向服务器发送大约200个请求可能不是一个好主意

---

在不偏离页面图形设计的情况下，解决此类问题的最佳方法是什么？我应该使用JavaScript使用某种“延迟加载”吗？我是否应该将所有这些都放在一个大图像中，并使用一堆骇人听闻的CSS来实现一个请求？

我想您可能有一些选择

• 分页
• 通过JavaScript的延迟加载
• CSS精灵
• 和/或CDN

分页是非常常见的，我认为与用户配合得很好。延迟加载适用于每个JavaScript用户（几乎所有用户）

例如，可以通过一次抓取20个并制作一个大图像来实现spring。我会说一次使用20个，这样用户就不必等到超大图像下载后才能看到任何图像

您可以使用PHP和GD一组20张地抓取每个图像，然后将它们缝合在一起，记录它们的偏移量，然后将其打印到样式表中

您的CDN应设置为不发送Cookie（如果您的站点使用

www

，则为不同的域或子域）。您还可以配置此服务器以优化它以提供静态内容

---

关于发送远期到期头（投票支持他！）。不要忘记添加某种版本控制，以防您需要更新图像，并希望保持相同的文件名。

您最好的选择是为列表分页

---

如果您必须在一个页面上拥有所有项目，那么使用sprites可以将其简化为一个图像，这是一种非常有效的方式（即，不是真正的黑客）。

对于静态，我建议使用类似于

static.example.com

子域的

nginx

，这是一种非常轻量级的Web服务器，与传统的Web服务器相比，它可以以更少的开销提供图像。设置适当的expire&cache头当然，访问您站点的人应该将您的所有图像在缓存中保留相当长的时间。

还有一个选项：css中的数据URI。基本上，您可以对图像进行base64编码，并将其直接粘贴到css文件中。一个请求提供css和所有图像，整个内容可以通过gzip压缩来节省更多的开销

缺点是什么？IE5-7不以本机方式处理数据uri（IE8+确实支持这一点）。您可以通过使用两个版本的样式表（一个带有嵌入图像，一个没有）来解决这个问题，并让apache选择提供哪一个。或者，您可以使用javascript解决方案，将数据uri支持添加到较旧的IEs中

---

对于Rails用户，有一个称为Jammit的gem可以自动执行此操作。它生成数据uri和常规版本，以及每个版本的压缩等价物。

我建议使用200个div，每个div的背景图像从一个图像文件加载，该文件是所有图像连接在一起的条带，alacss精灵

我将创建图像精灵，并使用css在div中显示图像，如下图所示-10px 30px。

---

这是一个简单的基于web的精灵和CSS生成器

使用CSS精灵。所有图像的总图像大小（按声音大小）约为600kb，这可能太大，无法一次性加载，因此您可以将图像分成几个精灵，每个~100k。然后，您可以根据所查看的内容对其加载顺序进行优先级排序。

CSS精灵将产生最大的不同。至于版本控制：我通常将“上次修改时间戳”与数据一起存储，因此图像源将是

/imagename.jpg？

，这样您就可以方便地保存描述性文件名，虽然仍然能够告诉浏览器这是另一个图像。事实上，您没有对查询字符串执行任何操作并不重要，只是浏览器会将不同的url识别为要缓存的不同图像。@Wrikken我使用了一种非常类似的方法，我的一张图片可能是

something.jpg？m=1328883

。这意味着用户必须先下载一张超大图片，然后才能查看任何图片。是的，这是一个非常好的建议-在将来设置Expires头将阻止大多数浏览器在缓存后发出请求