javascript - 处理图片较多的网页

Question

我有一个大约 200 个节目的电视节目列表。这些节目中的每一个都有一个小图像，40x60 像素和 3 kB，并且它们都同时列在同一页面上。

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

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

Answer 1

我想你可能有几个选择

• 分页
• 通过 JavaScript 延迟加载
• CSS Sprite
• 和/或 CDN

分页非常普遍，我认为它很适合用户。延迟加载适用于每个 JavaScript 用户(几乎所有)。

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

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

您的 CDN 应设置为不发送 cookie(如果您的站点使用 www，则为不同域或子域)。您还可以配置此服务器以优化它以交付静态内容。

Wrikken also makes a good point关于发送远期到期标题(投票给他!)。如果您需要更新图像并希望保持相同的文件名，请不要忘记添加某种版本控制。