jQuery, ändern Bild src mit Lade Bild

Question

ich diese Situation haben:

<div id="main_image"> 
<img src="images/big_image.png" alt="big image" width="300" height="300" /> 
</div> 
<div id="thumbnails"> 
<a href="images/big1.png"><img src="images/thumb1.png" alt="thumb 1" /></a> 
<a href="images/big2.png"><img src="images/thumb2.png" alt="thumb 2" /></a> 
<a href="images/big3.png"><img src="images/thumb3.png" alt="thumb 3" /></a> 
</div> 

ich das große Bild src wie dieser Code ändern:

$("#thumbnails a").hover(function() { 
$("#main_image img").attr("src",$(this).attr("href")); 
}); 

Bevor das neue Bild zeigt, möchte ich zeigen, auf der main_image div ein Ladebild, wie dieses Skript, wenn das neue Bild zu groß ist, muss ich warten, um zu rendern. Wie kann ich diese Situation lösen?

Tnx

---

FOUND IT:

$('#additionals_image_carousel li a').mouseover(function() { 
      var href = $(this).attr("href"); 

      $("#productMainImage img").fadeOut(function() { 
       $(this).load(function() { $(this).fadeIn(); }); 
       $(this).attr("src", href); 
      }); 
    }); 

und #productMainImage hat eine Lade Bild als zentriert Hintergrund

jQuery fade to new image

Answer 1

ich es nicht getestet, sondern geben ihm eine versuch, platziere dieses div im Hauptbild

<div id="load"><img src="images/loading.gif"/></div> 

#load 
{ 
display:none; 
} 

tun dann so etwas wie dieses

$("#thumbnails a").hover(function() { 
$("#load").css('display','inline'); 
}); 

Answer 2

1. Laden GIF-Bild hinzufügen
2. ordne nicht den Laden jedes Mal Aktin die Mouseover-Aktin gefeuert

html:

<img id="loading" src="/images/loading.gif" style=" display: none;"/> 

js:

var img = $("#productMainImage img"); 
var loadImg = $("#loading"); 

$('#additionals_image_carousel li a').mouseover(function() { 
    img.hide(); 
    loadImg.show(); 
    img.attr("src", $(this).attr("href")); 
}); 

img.load(function() { 
    loadImg.hide(); 
    $(this).fadeIn(); 
});