jQuery，用加载图像更改图像src

Question

我有这种情况：

<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>

我像这段代码一样更改了大图像src：

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

在显示新图像之前，我想在main_image div上显示一个加载图像，如同这个脚本一样，如果新图像要大，我必须等待渲染。我该如何解决这种情况？

TNX

---

找到了：

$('#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); 
            }); 
    });

和#productMainImage将加载图像作为居中背景

jQuery fade to new image

Answer 1

我没有测试过，但试一试，将这个div放在主图像中

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

#load
{
display:none;
}

然后做这样的事情

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

Answer 2

1. 添加加载gif图像
2. 每次鼠标悬停肌动蛋白射击时都不要分配加载肌动蛋白

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(); 
});