设置条件以在加载时间太长时交换图像

Question

I want to make a condition when an image takes more than 2 seconds to load, swap that image with another one. Now, I have a .on('error') function to check the image url, if the url is bad, swap that image. But, what if an image is taking too long to load? Is there a callback I can use when certain images take more than 2 seconds to load?

        $('img').on('load', function() {
          //do things here
    })
      .on('error', function() {
        $(this).parent().css('background-image', 'url("/broken-image")');
        $(this).parent().addClass('img-not-found');
      })
      .each(function() {
        if(this.complete) {
          console.log('completed here');
        }else {
        $(this).parent().css('background-image', 'url("/broken-image")');
        $(this).parent().addClass('img-not-found');
        }
    });

Answer 1

You can make it work - using the onload function of the image to determine that the image is actually done loading:

var imageElement = document.getElementById("myImage");
var isImageLoaded = false;

imageElement.onload = function() {
    isImageLoaded = true;
}

setTimeout(function() {
    if (isImageLoaded === false) {
        //2 seconds passed, no dice on the image!
    }
}, 2000);