仅使用一个 HTTP 请求在 Wordpress 中预加载 100 张图像

Question

我有一个 JSON 文件，它引用了我的 Wordpress 主题中显示的动画中使用的大约 300 张图像。在我的 header.php 中，我使用以下 jQuery 在 DOM 加载时预加载所有图像。

function preload(images) {
  jQuery(images).each(function () {
    jQuery('<img />').attr('src',this).appendTo('body').css('display','none');
  });
}

jQuery(document).ready(function() {
  preload([
     "<?php bloginfo('template_directory'); ?>/library/images/img001.jpg",
     "<?php bloginfo('template_directory'); ?>/library/images/img002.jpg",
          //about 300 more...
  ]);
});

问题是图像为 900x400 像素，因此所有 300 个 HTTP 请求大约需要 30 秒才能通过。我想如果我只用一个 HTTP 请求加载图像，我可以减少加载时间。这可能吗？提前致谢。

Answer 1

是的，可以使用sprites（不，不是苏打水）。这是将图像打包成一张大图像的时候。

您可以查看PHP's GD library 为您生成编译后的图像。当然，提前编译一次，不是每次请求都编译一次，不然会杀掉你的服务器。

把它发挥到极致，you can send the images as a base64 string。这样，字符串可以在服务器上压缩并在客户端with an algorithm like LZW上解压缩。除此之外，您可以apply GZIP on transport。

在客户端，您会收到一张大图。如果你用base64编码，你可以使用data URI scheme来显示使用base64字符串的图像。

毕竟，您可以使用精灵技术为图像设置动画，每帧移动图像。

---

其他提示：

• 使用 Adob​​e Fireworks 之类的工具压缩图像：

  • 删除未使用的颜色
  • 将质量降低到可接受的程度
  • 使用像 JPG 这样的轻量级格式

• 将动画分割成多个部分。这种技术用于Google's mother's day doodle，其中动画被分成几部分而不是每帧。

Answer 2

例如，为了完成一个 HTTP 请求，您需要对文件进行 base64_encode 并将它们作为 json_encoded 列表发送。在客户端做类似的事情：

jQuery.get('json_list_of_images.php', function(list) {
    for(i in list) {
        $('<img />').attr('src', list[i])
    }
});

这将使数据量增加 33%，这也意味着您将显示的图像已完全加载到内存中，即 300*900*400*1.33*4 = 0.535100698GB

Answer 3

需要 30 秒的原因是因为您尝试加载 300 张图片。再多的优化也不会使这成为一项相当快的任务。你需要重新考虑你的过程。例如，您可以：

1. 加载第一张图片并显示它
2. 在显示第一张图片时开始加载第二张图片
3. 显示第二张图片并为​​剩余的图片重复第 2 步

一次加载 300 张这样的大图像绝对是零需求。