通过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()，而这并不是我所需要的。

如果任何人都可以提供任何解决方案来修复此代码，或者甚至可以采用其他更有效的方法来获取所有图像，那么我将敞开心open。

imageArray ： 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 …）。