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:

Different ways to watermark html input text

watermarktext

 

There are many ways to add a watermark text to an input text, which will go when you focus the control or start writing inside.

I will list here some good ways to this behavior:

This is an easy and short way to it just using the onfocus and onblur events of the textbox or input field.

But lets make the code cleaner by geting this text from the server side, which will give us many options such as supporting localization.


 Also you can find online a lot of other ways which will fit in some cases such as the following:

jQuery Watermark

Watermark Input Plugin

TextBoxWatermark (AjaxToolKit)

In-Field Labels jQuery Plugin