0

How to detect the image that not load correctly on web page? I used the following jquery but not working.

$('#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);

enter image description here

Edit1

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

enter image description here

Edit2

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

enter image description here

matrixxx
  • 33
  • 5
  • Does this answer your question? [JavaScript: Know when an image is fully loaded](https://stackoverflow.com/questions/1257385/javascript-know-when-an-image-is-fully-loaded) – Buddy Christ Apr 29 '20 at 06:16
  • I'm using ajax to get the image url then change the existing img.src but sometime the result on html is the image load complete but the image is display as my sample – matrixxx Apr 29 '20 at 06:38
  • 1
    What does "not working" means? There is none of the logs in your console? What does your Network tab says about the request? Is it really over? Besides your image is really big, it could just be rendering glitch due to too many data for the GPU. – Kaiido Apr 29 '20 at 06:39
  • Also, could you try to paste `$('#image1')[0].decode().then(()=>console.log('decoded'))` in your console when this happens. – Kaiido Apr 29 '20 at 06:46
  • @Kaiido I added the result to the Edit1 in the post. the result is sometime the image cannot load completely. – matrixxx Apr 29 '20 at 08:38
  • .. I fear your image is somehow valid, even though obviously corrupted, it doesn't make the decoder throw. The best would probably be to fix whatever corrupts that image. If you really wanna catch that case, maybe `..on('load', function() { createImageBitmap( this ).then(()=>console.log('should be fine')).catch(()=>console.log('failed'))} );` would work, though I'm really not sure, and can't repro on my machine... – Kaiido Apr 29 '20 at 08:56
  • @Kaiido the catch function work fine, it can catch the unsuccessful image but sometime the then function still got the image not loaded complete result. – matrixxx Apr 29 '20 at 09:35

1 Answers1

1

You can use the .load() event handler, like this:

$("#image1").on('load',function() {
  alert('I loaded!');
}).attr('src', 'image1.jpg');
Simone Rossaini
  • 8,115
  • 1
  • 13
  • 34