0

我有一个 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 请求加载图像，我可以减少加载时间。这可能吗？提前致谢。

4

3 回答 3

3

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

您可以查看PHP 的 GD 库来为您生成编译后的图像。当然，提前编译一次，不是每一个请求，否则它会杀死你的服务器。

将其发挥到极致，您可以将图像作为 base64 字符串发送。这样，字符串可以在服务器上压缩，并在客户端使用 LZW 之类的算法解压缩。除此之外，您可以在 transport 上应用 GZIP。

在客户端，您将图像作为一个大图像接收。如果您使用 base64 对它们进行编码，则可以使用data URI 方案使用 base64 字符串显示图像。

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

附加提示：

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

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

  • 将动画分成多个部分。这种技术被用在Google 的母亲节涂鸦上，动画被分成几部分而不是每帧。

于 2012-05-26T10:52:29.743 回答
1

例如，为了完成一个 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

于 2012-05-26T10:48:05.073 回答
0

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

  1. 加载第一张图片并显示它
  2. 在显示第一个图像时开始加载第二个图像
  3. 显示第二张图像并对剩余图像重复步骤 2

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

于 2012-05-26T10:42:09.390 回答