通过 jQuery Ajax 加载图片

Question

我正在创建一个浏览大量图片的应用程序。此时，项目的那部分就完成了，它对正确的图片进行排序、过滤和加载，甚至将它们拆分为单独的页面以加快加载速度。

这很好用，但每页加载 25 张图片仍然需要 8 秒以上。我做了一些研究，并得出结论，使用异步 jQuery Ajax 请求最好尽可能快地同时加载它们。

到目前为止，这是我的代码：

var imageArray = <?php if (!empty($images)) {echo '["' . implode('", "', $images) . '"]';} else {echo "false";} ?>;
console.log(imageArray);
console.log(imageArray.length);
for (i = 0; i < imageArray.length; i++) {
    $.ajax({
        type: 'GET',
        url: imageArray[i],
        dataType: 'image/jpg',
        async: true,
        success: function (data) {
            $("#" + i).attr("src", data);
        }
    });
}

这段代码的问题在于它除了一个带灰色边框的空白色方块之外什么都不加载。当我修改代码并在 Chrome 的控制台中运行它时，data最终是一串混乱的字符，我认为这些字符是原始图像数据。

我已经搜索了几天，包括在 SO 上，但我还没有找到满足我需要的解决方案。相反，我找到了使用 jQuery 简单地将 url 放入图像源的解决方案，attr()这不是我需要的。

如果有人可以提供任何类型的解决方案来修复此代码，或者甚至是获取所有图像的不同且更有效的方法，我对任何事情都持开放态度。

图像阵列：http : //pastebin.com/03tvpNey

问候， 伊曼纽尔

Answer 1

如果您使用的是 Base64 图像数据（您提到的混乱字符的字符串），则需要将您的内容img src设置为：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

所以你的代码应该是：

var imageArray = <?php if (!empty($images)) {echo '["' . implode('", "', $images) . '"]';} else {echo "false";} ?>;
console.log(imageArray);
console.log(imageArray.length);
for (i = 0; i < imageArray.length; i++) {
$.ajax({
    type: 'GET',
    url: imageArray[i],
    dataType: 'image/jpg',
    async: true,
    success: function (data) {
        $("#" + i).attr("src", 'data:image/png;base64,'+data);
    }
});
}

但是......如果通过 AJAX 加载图像并使用 Base64 内容比使用正常<img src="path"/>方法更快，我会感到非常惊讶。

AJAX 的目的是在加载 DOM 后获取一些数据。所有现代人的浏览器将已经异步获取的图像。我怀疑你会看到任何性能提升。

我建议更可能的问题是你的 25 张图像......我想它们显示为缩略图......仍然是大的高分辨率图像。您应该保存一个较小的“缩略图”版本，然后在/如果用户单击缩略图查看全尺寸图像时获取高分辨率图像。

请注意，元素 ID可以以（或为）数字开头。这在 HTML4 中无效，但在 HTML5 中完全没问题。但是，您可能在使用 CSS 规则时遇到问题 - 因此最好在前缀前加上一个字母（即 i1、i2、i3...）。