小编典典

通过jQuery Ajax加载图像

ajax

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

效果很好,但每页加载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。

imageArrayhttp :
//pastebin.com/03tvpNey

问候,伊曼纽尔


阅读 353

收藏
2020-07-26

共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 …)。

2020-07-26