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

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

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 ......）。

Answer 2

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

以下是我修改的一些代码，该代码会将图片返回为斑点：

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方法，因此我认为一个示例可能会有用。

Answer 3

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

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

Answer 4

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

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

了解ID为何不应从数字开头：$pull

通过jQuery Ajax加载图像

4 个答案: