javascript - 通过 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);
        }
    });
}

此代码的问题在于它只加载一个带灰色边框的空白色方 block 。当我修改代码并在 Chrome 的控制台中运行它时，data 最终变成了一串困惑的字符，我认为这是原始图像数据。

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

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

图像数组: 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...)。