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:
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.