jquery将图像加载到div奇怪的行为中

Question

I've made slideshow with thumbnails at it's side.

Here, basically a div which displays the image and after clickimg on a particular thumbnail, it's related picture will be dynamically displayed in the main div (#display #slideshowpic). Here is the code example,

<div id="container">
    <div id="display">
      <img id="slideshowpic" src="initial.jpg">
    </div>

    <div id="thumbs">
      <img class="thumb" id="image1">
      <img class="thumb" id="image2">
      <img class="thumb" id="image3">
      <img class="thumb" id="image4">
      <img class="thumb" id="image5">
   </div>
</div>

And here is the javascript,

$('.thumb').click( function() {
        $('#slideshowpic').attr('src',"");   /// clears or removes current image
        $('#slideshowpic').attr('src',"/uploads/" + $(this).attr('id') + ".jpg");
});

Here, the image which is to be loaded in the main div after clicking thumbnail, is progressive image which is interlanced with php gd.

This is working perfectly in firefox. After clicking thumbnail, the image instantly displays in the main div with progressive fasion. But it doen't seems to be working in chrome.

The Problem is (chrome) : After clicking the thumbnail; first the image is cleared as per the code, then the previous image displays instead of new image (clicked image) and then new image displays after taking some time delay (i think the delay is the time which new image is taking to load).

google chrome doesn't show image till it loads image fully

I just can't figure out where is the problem is. Should i use another technique to load that dynamic image.. ? please help. I stucked in it from many days.

EDIT : you can check it in below links,

• http://bit.ly/ZxVCM3
• http://bit.ly/1oeutK5
• http://bit.ly/1rIxvAV

Click the thumbnails to load the slideshow.

Answer 1

<img> without src has no reason...

$('.thumb').click( function() {

        var img = $('#slideshowpic');
        var src = $(this).attr('id');

        img.css('opacity','0').on('load', function() { 
             $(this).fadeIn();
        }).attr('src',"/uploads/" + src + ".jpg");


});

from Detect image load