JavaScript create images and document.readyState

Question

To make sure a document is ready before doing stuff, i do the following :

(function() {
    var interval = window.setInterval(function() {
        if("complete" === document.readyState) {
            window.clearInterval(interval);
            // Some stuff
        }
    }, 10);
})();

If somewhere in my code i create an image from JavaScript like this :

var image = new Image();
image.onload = function() {
   // Some other stuff
};
image.src = 'some_url';

Will the check I perform on document.readyState also wait for "image" to be loaded, or will it just wait for the images present in the HTML code, and only those, to be loaded ?

Thanks in advance.

Answer 1

You don't need your setInterval.

From the MDN :

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.

You can simply do this for the statically included images :

window.onload = function() {
    // Some stuff
};

As this doesn't take into account the images you create later, you may do this :

window.onload = function() {
    var image = new Image();
    image.onload = function(){
        // Some stuff
    };
    image.src = 'some_url';
};

Answer 2

In jquery document.ready() function is call when entire html page is ready or we can say bind (in technical terms).

You should try with increasing Interval time. or include image load callback for performing the stuff.