How long does it take an image to fail -?

Question

I load images from the internet as such:

img.src = 'some_path'

I noticed that some images take a long time to load if the network is slow, and some take a long time to load and then fail.

Sometimes, the domain is down all together. If the server is down, this works well, because an error will be thrown pretty quickly and I can catch the error and change the src accordingly.

However, for pages that are slow and then fail - I see that the browser displays some sort of blank box for what seems like 10 seconds or more before finally erroring out.

It seems like way too long. I'd say give the site about 4 seconds and then throw an error if it does not respond.

Is there anyway to adjust this?

The amount of time the client waits before throwing an error?

It just looks sloppy to have this sort of blank blox staring at the user for 10 or more seconds.

Currently in FireFox.

Answer 1

The only way I know of to set a timeout for getting something in script is by using an XMLHttpRequest, so you could load in your image through ajax, for example;

function getImage(src, callback, maxTime) {
    var x = new XMLHttpRequest();
    if (maxTime) x.timeout = maxTime;
    x.onload = function () {
        var img = new Image();
        img.src = window.URL.createObjectURL(this.response);
        callback(img);
    };
    x.onerror = function () {
        callback(null);
    };
    x.open('GET', src, true);
    x.responseType = 'blob'; // save having to re-create blob
    x.send(null);
}
getImage(
    'some_path',     // get image at "some_path"
    function (img) { // then
        if (!img) alert('failed!');          // whatever if didnt work
        else document.body.appendChild(img); // whatever if did work
    },
    4000             // maximum wait is 4 seconds
);

Disadvantages of this method are browser backwards compatibility and if the server returns something but it is not an image

Answer 2

Cross / Backward compatible

function loadImage(src, complete, timeout) {
    var img = document.createElement("img");
    img.src = src;
    setTimeout(function() {
        complete(img.complete && img.naturalWidth !== 0 ? img : false);
    }, timeout || 5000);
}

loadImage("path/to/image.png", function(img) {
    if(img) {
        //TODO ON SUCCESS
    } else {
        //TODO ON FAILURE
    }
}, 4000);

Answer 3

Try this:

var img = document.getElementById("myImg")
img.src = 'https://atmire.com/dspace-labs3/bitstream/handle/123456789/7618/earth-map-huge.jpg?sequence=1'; //very big image, takes like 7 seconds to  load
window.setTimeout(function()
{
    if(!IsImageOk(img))
        img.src = "http://www.google.com/images/srpr/logo4w.png";
},4000);

function IsImageOk(img) {
    // During the onload event, IE correctly identifies any images that
    // weren’t downloaded as not complete. Others should too. Gecko-based
    // browsers act like NS4 in that they report this incorrectly.
    if (!img.complete) {
        return false;
    }

    // However, they do have two very useful properties: naturalWidth and
    // naturalHeight. These give the true size of the image. If it failed
    // to load, either of these should be zero.

    if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
        return false;
    }

    // No other way of checking: assume it’s ok.
    return true;
}

jsFiddle: http://jsfiddle.net/hescano/mLhdv/

using code from Check if an image is loaded (no errors) in JavaScript

Note that the first time the code will run fine, but after that the image will be cached and it might load faster.