jQuery: Change image on checkbox click

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!

Have you tried anything? At least changing the image src should be fairly easy and can be achieved by reading the documentation... imo. — Felix Kling
– Felix Kling, Commented Oct 12, 2010 at 15:21
Yes, it's no big deal to change the image src (eg. '$(this).attr("src", new_image_src)') but I don't know how to implement this loading effect. — Daniel
– Daniel, Commented Oct 12, 2010 at 15:27

Gabriele Petrioli · Accepted Answer · 2010-10-12 15:47:21Z

1

The steps should actually be

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.
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..
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/

edited Oct 12, 2010 at 15:47

answered Oct 12, 2010 at 15:37

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aardvark · Accepted Answer · 2010-10-12 15:41:17Z

0

Well, lets take a quick moment and dissect the problem:

If your changing the image source (which can be done almost instantly) why do you need a loader gif? In fact, displaying the loader gif takes as long as displaying the new image. If you'd like the loader gif for dramatic appeal you can display the loader.gif, wait 5 seconds, then change to the new image.

Changing the image can easily be accomplished by changing the src attribute on a current image. For instance,

$.('#myCheckboxID').change(function()
{
    $.('#myPictureID').attr('src', "path/to/new/image/");
});

Let me know if you decide you need that loader gif for dramatic effect and I'll help you wire it up

edit: Because the loading effect is desired, try something like this. I'll pencil down some psuedocode, let me know if its not specific enough.

Change the source on your first picture
Hide the first picture for x seconds (get a feel for how long it takes to load)
Unhide a loading gif of the same size with opacity already set
hide the loading gif and unhide the first picture

edited Oct 12, 2010 at 15:41

answered Oct 12, 2010 at 15:23

Aardvark

1,2641 gold badge13 silver badges21 bronze badges

1 Comment

Daniel Over a year ago

Thanks. Well, the images are fairly big (200-300 kb) and could take some time to load for people with slower connections. So it would be nice to have a loader gif which could also be preloaded to show up instantly.

Collectives™ on Stack Overflow

jQuery: Change image on checkbox click

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related