Question

I have a situation where we are progressively showing higher and higher quality images to a user as they download.

The logic looks like this:

3 Image formats : low quality (5-8kb), large (60-80kb), highres (150-250kb).

1. Check if large or high res photo is cached if so simply initially show cached version and FINISH.
2. If not load low quality image and display to the user straight away.
3. precache large image and change img.src once it has loaded.
4. Check users window size if it exceeds a certain threshhold, precache highres image and change img.src on load.

Everything works beautifully.

However during the high res download if a user clicks to go to the next image, everything will of course get screwed up since we have set an event to occur onload when the previous highres image has loaded.

Essentially the onload event is occurring after the user has already clicked to go onto the next image, meaning that the NEW image is getting replaced with the old one.

What I need to do is be able to cancel the function whenever a user changes to the next photo.

The function looks something like this:

(function(index){
        $(highresimage).imagesLoaded(function(){
                    setTimeout(function(){
                        self.cache.image = $(highresimage).appendTo(self.cache.imagewrap);
                        self.cache.photos[index]['highresloaded'] = true;
                        setTimeout(function(){
                        self.cache.imagewrap.children('img').first().remove();
                        self.cache.image.css({
                            'left':'',
                            'position':'relative'
                        });
                        },10);
                    },200);
        });
})(index);

So I need to be able to programmatically cancel the $(highresimage).imagesLoaded(function(){});

What would be the best way of achieving this?

Thanks in advance.

EDIT: Please note in my example we are actually cloning the image, changing the src, adding it to the dom, leaving a few ms then removing the old image. This is down to a bug in Firefox which causes flashing when changing the src of high resolution images. As horrible as it is, removing the ugly timeouts makes the experience far worse for the user in Firefox. They are there for a reason. 😛

Answer 1

If you save the setTimeout in a variable, you can use clearTimeout to cancel it. In theory, the loading of the images should be aborted.

var timeout = setTimeout(do_something, 1000); // create

clearTimeout(timeout); // cancel

After looking at the source code of imagesLoaded(), I can’t find anything that allows you to cancel that function too which is a bit of a bummer 🙁