HOW TO TELL WHEN IMAGES HAVE LOADED

4328553366_e4789ac407_z

Its a common requirement in some websites specially which are dealing with many images and JavaScript, such as image galleries websites or websites that has images slide shows made using JavaScript.

In a project i just finished, i was making a slide show animation which start automatically when the page load and animate to a certain image based on a query string.

I was using JQuery to implement this simple slide show.

The Problem i faced is that the JQuery animation start to run before the images inside the slide show are loaded, and them make the animation seams as its animate on white screens not images, and will look worse on IE browsers which may give the ‘x’ sign on images which didn’t load yet.

So my mission was to find a way to don’t start the automatic animation until all images have loaded.

At first i just wrote my code in the document.ready JQuery function, but this made my code to run just after JUST the document html have loaded and will not wait till images load.

I found a good solution:

See $(document).ready vs. $(window).load

 

Also found a solution which will work with just an image, incase you want to wait just for an image to load:

This entry was posted in Technical. Bookmark the permalink.

2 Responses to HOW TO TELL WHEN IMAGES HAVE LOADED

  1. Nermien says:

    nice post thank you.

  2. Bas Oomes says:

    Thanks for posting. Now I have a better understanding of the difference between window.load and document.ready

Comments are closed.