1

私はこの状況を持っています：

<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 が新しい画像にフェード

4

2 に答える 2

0

私はそれをテストしていませんが、試してみてください。このdivをメイン画像に配置してください

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

#load
{
display:none;
}

次に、このようなことをします

$("#thumbnails a").hover(function() {
$("#load").css('display','inline');
});
于 2012-04-13T10:47:58.943 に答える