通过 jQuery Ajax 加载图像答案

【问题标题】：Load an image through jQuery Ajax通过 jQuery Ajax 加载图像
【发布时间】：2016-02-15 17:44:26
【问题描述】：

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

这很好用，但每页加载 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 attr() 简单地将 url 放入图像源的解决方案，这不是我需要的。

如果有人可以提供任何类型的解决方案来修复此代码，或者甚至可能是获取所有图像的不同且更有效的方法，我愿意接受任何事情。

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

问候，伊曼纽尔

【问题讨论】：

你的图像数组返回什么？并且数据类型应该是image/jpg
图片数组返回图片的相对url，即.jpg。到目前为止，我已经更新了我的代码以包含正确的类型。图像数组如下所示：pastebin.com/03tvpNey
那么你是在加载这个 ajax 调用吗？
你可以试试这个插件jquery.eisbehr.de/lazy
@SusheelSingh 感谢插件。我已经检查过了，它看起来很有希望，但是下面的用户有一个更好的主意，就是将图像缩小为缩略图以节省加载时间。不过感谢您的帮助！

标签： javascript php jquery ajax image

【解决方案1】：

前段时间我遇到了这个问题，我使用了这个代码：

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;
        }
    });
}

【讨论】：

那么，如果我的略读正确，这里的代码会在标签中加载图像，然后将其附加到您选择的目标？这并不是我想要的，因为这段代码不会尝试一次加载多个。
@EmanuelElliott 在您的链接中使用for 循环来遍历您想要的所有图像并在for 内调用loadImage 函数
那么你的代码，loadImage() 函数，它是使用标签作为它的“目标”还是使用像 div 这样的东西？

【解决方案2】：

将您的 id 更改为 id1,id2 或 1,2 中的类似名称，并成功使用：

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

看看为什么 id 不应该从数字开始：What are valid values for the id attribute in HTML?

【讨论】：

嘿，我尝试了你的建议，我将 id 设置为 id0、id1、id2 等，但它仍然显示空白。我注意到，当我检查图片上的元素时，src 属性中没有显示任何内容。
@EmanuelElliott 为什么不进行一次 ajax 调用来获取所有图像路径，然后成功拆分它们并使用 for 循环分配它们。
好吧，我的问题不在于获取图像的路径。这工作得很好。我的问题是及时加载图像，因为这需要花费大量时间。
@EmanuelElliott 您是否成功获取了图像路径。请检查单击它是否显示图像。如果不是，则路径不完整。
我不太确定你在这里问什么。能否请您尝试更清楚地措辞？

【解决方案3】：

如果您使用的是 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...）。

【讨论】：

不，它不是 base64。我所说的“随机混杂字符”是指显示图片格式、日期、颜色类型等的奇数符号和几个字母。
现在，您认为我应该使用缩略图是个好主意。您是否知道有效处理 300 多张图片的好方法？
我会在这里调用您的建议，即使用缩略图作为我的答案。这绝对有帮助！非常感谢戴夫！
谢谢@Emanuel。至于实现这一点的最佳方式 - 有一些。图片是如何上传的？您可以使用 PHP 调整它们的大小，并保留 1x 缩略图和 1x 原始（高分辨率）。或者，您可以有一个页面 - thumbnail.php，它将图像 URL 作为查询字符串参数，然后使用 GD 返回它调整大小 - 类似于 this post。（我会说保留 2 个副本 - 它的处理器密集度较低。处理 = 昂贵，磁盘空间 = 便宜！）
感谢所有帮助。即使是从慢速 iPad wifi 中，我也能很好地完成这一切。我设法将 1.4 GB 的文件减少到 10mb 的文件！我真的不能感谢你！

【解决方案4】：

只是为了更新（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 方法，因此我认为一个示例可能有用。

【讨论】：