我遇到这种情况:
<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将加载图像作为居中背景
答案 0 :(得分:0)
我还没有测试过,但试一试,把这个div放在主图像中
<div id="load"><img src="images/loading.gif"/></div>
#load
{
display:none;
}
然后做这样的事情
$("#thumbnails a").hover(function() {
$("#load").css('display','inline');
});
答案 1 :(得分:0)
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();
});