I'm trying to create a simple portfolio page. I have a list of thumbs and an image. When you click on a thumb, the image will change.
When a thumbnail
is clicked, I'd like to have the image fade out, wait until the image
is loaded, then fade back in. The problem I have right now
is that some of the images are pretty big, so it fades out, then fades back in immediately, sometimes while the image
is still loading.
I'd like to avoid using setTimeout, since sometimes an image will load faster or slower than the time I set.
Here's my code:
$(function() {
$('img#image').attr("src", $('ul#thumbs li:first img').attr("src"));
$('ul#thumbs li img').click(function() {
$('img#image').fadeOut(700);
var src = $(this).attr("src");
$('img#image').attr("src", src);
$('img#image').fadeIn(700);
});
});
<img id="image" src="" alt="" />
<ul id="thumbs">
<li><img src="/images/thumb1.png" /></li>
<li><img src="/images/thumb2.png" /></li>
<li><img src="/images/thumb3.png" /></li>
</ul>
