Detect if objects are loaded [Javascript]

Question

I was wondering, is there a way to detect if a certain image / div is loaded? For example when i am loading two heavy images and showing a loading sign at the two places the images will later occupy, is there a way to already display the first image when it's loaded while still loading the second one?

Answer 1

If you are using new Image to preload images, then you can do the following to be notified of then it is loaded

var img = new Image();
img.onload = function() {
    //display the image
    document.getElementById("myDiv").innerHTML = "%3Cimg src='myimg.jpg' alt=''/%3E";
};
img.src = "myimg.jpg";

Remember to set the src after the onload.

Answer 2

myImage.addEventListener('load', function() { ... }, false);

Code inside the above function will be called when the image is finished loading.

Answer 3

if an image is done loading, its .complete property switches to true.