Question

I created a simple image gallery where I have a large picture in the middle and thumbnails below:

<img class="primary-image" src="example.jpeg">
<div class="thumbnails"> 
    <img class="thumbnail" src="red.jpeg">
    <img class="thumbnail" src="blue.jpeg">
    <img class="thumbnail" src="green.jpeg">
</div>

I have the following click handler on the thumbnails:

$('.thumbnail').click(function() {
    var src = $(this).attr('src');
    $('.primary-image').attr('src', src);
});

This is working fine in chrome, but in Firefox, the image loads slowly from top to bottom, giving an ugly “transition” which is not meant to be there.

What is going on?

UPDATE

I now noticed that what is happening is that the browser does not display the new image. And also that it only happens with specific pictures:

• If I scroll down and up quickly the picture changes. (after clicking thumbnail)
• If the entire picture canvas is visible, and I do nothing, the previous picture remains there, and the new picture is not displayed. (after clicking thumbnail)
• If I switch applications and come back to firefox, the new picture is there. (after clicking thumbnail)
• If I double click the thumbnail, the picture changes perfectly.

Answer 1

Have you tried to preload the image? Maybe the image was cached in Chrome, but not in FireFox.

There is someone on StackOverflow who posted some code to easily preload images. Please take a look at Preloading images with jQuery