jquery - 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 上显示加载图像，因为就像这个脚本一样，如果新图像太大我必须等待渲染。我该如何解决这种情况？

肿瘤坏死因子

---

找到了：

$('#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淡入新图像

Answer 1

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

Answer 2

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

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

#load
{
display:none;
}

然后做这样的事情

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