如何检测网页上未正确加载/未完成的图像？答案

【问题标题】：How to detect the image that not load correctly/completed on web page?如何检测网页上未正确加载/未完成的图像？
【发布时间】：2020-04-29 17:33:39
【问题描述】：

如何检测网页上未正确加载的图像？我使用了以下 jquery 但无法正常工作。

$('#image1').on('load', function() {
    if ($('#image1').prop('complete')) {
        console.log("image complete: true");
    } else {
        console.log("image complete: false");
    }
}).on('error', function() {
    console.log("image loaded error");
}).attr("src", imgUrl);

编辑1

$("#image1").on('load', function() {
    console.log("image1 complete: true " + this.width + "x" + this.height);
}).attr("src", imgUrl);
$('#image1')[0].decode().then(() => console.log('decoded'))

编辑2

$("#liveImage1").on('load', function() { 
    createImageBitmap(this).then(() => {
        console.log('Loaded');
    }).catch(() => {
        console.log('Failed');
    })
}).attr("src", imgUrl);

【问题讨论】：

这能回答你的问题吗？ JavaScript: Know when an image is fully loaded
我正在使用 ajax 获取图像 url 然后更改现有的 img.src 但有时 html 上的结果是图像加载完成但图像显示为我的示例
“不工作”是什么意思？您的控制台中没有任何日志？您的网络选项卡对请求有何说明？真的结束了吗？除了你的图像真的很大之外，它可能只是由于 GPU 的数据过多而导致渲染故障。
另外，发生这种情况时，您能否尝试将$('#image1')[0].decode().then(()=>console.log('decoded')) 粘贴到您的控制台中。
@Kaiido 我将结果添加到帖子的 Edit1 中。结果是有时图像无法完全加载。

标签： javascript html jquery web

【解决方案1】：

您可以使用 .load() 事件处理程序，如下所示：

$("#image1").on('load',function() {
  alert('I loaded!');
}).attr('src', 'image1.jpg');

【讨论】：

我收到以下错误。未捕获的 TypeError：url.indexOf 不是函数
您已将#myImg 更改为您的ID 标签#image1？
警报触发后图像仍未加载完成
你能发一个测试吗？
我正在使用 $("#image1").on('load', function() {}。