通过jQueryAjax加载图像 - Load an image through jQuery Ajax

我正在创建一个浏览大量图片的应用程序。此时，项目的这一部分已经完成，它会对正确的图片进行排序、筛选和加载，甚至将它们拆分成单独的页面以更快地加载。

这很好，但加载每页25张图片仍然需要8秒以上。我已经做了一些研究，得出的结论是，使用异步jQueryAjax请求最好能尽可能快地同时加载所有请求。

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

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 attr()将url放入图像源的解决方案，这不是我所需要的。

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

imageArray：http://pastebin.com/03tvpNey

谨致问候，Emanuel

如果您使用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…）。

只是更新（2020年5月），因为我一直在尝试通过ajax获取图像，尽管使用了base64方法，但没有成功。

以下是我修改过的一些代码，它将图像返回为blob：

const trigger = $('.trigger');
const wrapper = $('#wrapper');
const url = 'https://66.media.tumblr.com/35a8d8dac5c288505b3edb4a52655283/ee225bfce5e62623-af/s1280x1920/fad4e25562ce1b05c69dc8cc8da5a9a12d26a1aa.jpg';
trigger.on('click', () => {
    $.ajax({
       url,
       xhrFields:{
          responseType: 'blob'
       },
       success (data) {
          const url = window.URL || window.webkitURL;
          const src = url.createObjectURL(data);
          wrapper.attr('src', src);
       }
   });
});

此处的工作示例：http://jsfiddle.net/lharby/Ljwa1yhd/

我意识到这与OP请求略有不同，但我在这里找到了搜索"通过ajax jquery获取图像"的方法，所以我希望它能有所帮助。由于我无法使base64方法发挥作用，我认为一个示例可能很有用。

将您的id从1,2更改为id1,id2或类似内容，并成功使用此：

            $("#id" + i).attr("src", data);

看看为什么id不应该从数字开始：HTML中id属性的有效值是什么？

我不久前遇到了一个问题，我使用了以下代码：

function loadImage(path, width, height, target) {
    var loaded = true;
    $('<img src="' + path + '">').load(function () {
        if (loaded) {
            $(this).css('maxWidth', width).css('maxHeight', height).appendTo(target);
            loaded = false;
        }
    });
}

更新：

使用您的图像阵列：

["20151107_140328.jpg", "20151107_140329.jpg", "20151107_141113.jpg", "20151107_141114.jpg", "20151107_141439.jpg", "20151107_141447.jpg", "20151107_141500.jpg", "20151107_205509.jpg", "20151107_205512.jpg", "20151107_213703.jpg", "20151107_213708.jpg", "20151107_213823.jpg", "20151108_143256.jpg", "20151108_143258.jpg", "20151108_143320.jpg", "20151108_143322.jpg", "20151108_143339.jpg", "20151108_143340.jpg", "20151108_143419.jpg", "20151108_143422.jpg", "20151108_143433.jpg", "20151108_143435.jpg", "20151108_143443.jpg", "20151108_143445.jpg"]

你可以这样做：

var image_array = ["20151107_140328.jpg", "20151107_140329.jpg", "20151107_141113.jpg", "20151107_141114.jpg", "20151107_141439.jpg", "20151107_141447.jpg", "20151107_141500.jpg", "20151107_205509.jpg", "20151107_205512.jpg", "20151107_213703.jpg", "20151107_213708.jpg", "20151107_213823.jpg", "20151108_143256.jpg", "20151108_143258.jpg", "20151108_143320.jpg", "20151108_143322.jpg", "20151108_143339.jpg", "20151108_143340.jpg", "20151108_143419.jpg", "20151108_143422.jpg", "20151108_143433.jpg", "20151108_143435.jpg", "20151108_143443.jpg", "20151108_143445.jpg"];
for(var i = 0; i < image_array.length; i++) {
    loadImage(image_array[i], <width>, <height>, <container targeted>);
}

在imageLoad函数中：

function loadImage(path, width, height, target) {
    var loaded = true;
    $('<img src="/path/to/image/' + path + '">').load(function () {
        if (loaded) {
            $(this).css('maxWidth', width).css('maxHeight', height).appendTo(target);
            loaded = false;
        }
    });
}