Question

I want to change an image when a checkbox is clicked. Until the new image is fully loaded a loader image should appear on top of the current image. While loading the opacity of the current image should also change to 0.5.

The function should therefore consist of the following steps:

On checkbox click:

• Change img src

While loading:

• Set opacity of current image to 0.5
• Display loader.gif

When new image is loaded:

• Change opacity back to 1.0
• Hide loader.gif
• Display new image

How can this be done with jQuery?

Thanks in advance for all proposals!

Answer 1

The steps should actually be

1. on checkbox click, start to preload the new image
   Start by creating an Image object, and then setting its load property to a function that will be called once the image has been completely loaded. Then (after setting the load property) set the src attribute of the Image object we created to the Url of your image.

2. while waiting, set the opacity, show the loader
   Opacity you can control with the css property opacity. You should have the loader already in the page but hidden, and just show it while the preloading is in progress..

3. when preload is complete hide preloader, show image reset opacity
   The function we defined for the load attribute gets called and inside the handler we reset the opacity, hide the preloader and set the src of our element in the page to the src of the Image object we created..

here is a full example: http://www.jsfiddle.net/kqC9U/