1

個々の画像の読み込みが完了したが問題が発生したときに、読み込み中のアニメーションを削除しようとしています。読み込み中のアニメーションは、特定の画像が読み込まれるときに個別にではなく、最初の画像が読み込まれた後に削除されます。

それぞれが独自の読み込みギフを備えた画像の行が欲しいのですが、何かアイデアはありますか？

これが私がこれまでに思いついたものです。

.img-container{
float:left;
width:500px;
height:500px;}
.img-loading{
position:absolute;
background:url('loading.gif') center center no-repeat;
width:500px;
height:500px;}

<div class="img-container"><div class="img-loading"></div><img src="example.jpg"    height="500" width="500" border="0"/></div>
<div class="img-container"><div class="img-loading"></div><img src="example2.jpg" height="500" width="500" border="0"/></div>
<div class="img-container"><div class="img-loading"></div><img src="example.jpg3" height="500" width="500" border="0"/></div>

$(document).ready(function(){
$('img').css({'display':'none'});
$('img').bind('load', function () { $(this).fadeIn(1500);$('.img-loading').fadeOut(2000);});                
});
4

3 に答える 3

1

あなたはfadeOutを少し変更する必要があります：

$('img').bind('load', function () { $(this).fadeIn(1500).prev().fadeOut(2000);});

これにより、画像がフェードインし、その前にある要素を取得してフェードアウトします。

于 2012-09-14T16:04:26.197 に答える
0

これを試して：

$(document).ready(function(){
    $('img').css({'display':'none'});
    $('img').bind('load', function () { 
        $(this).fadeIn(1500);
        $(this).prev('.img-loading').fadeOut(2000);
    });                
});

.img-loadingコードでは、ロードする画像に関連する要素を指定する必要があるときに、クラスを持つすべての要素をフェードアウトするように呼び出していました。

于 2012-09-14T16:03:02.533 に答える
0

each()関数を試してください

$('img').each(function(){
        var container = $(this).parent();
        $(this).bind('load', function () { $(this).fadeIn(1500);$('.img-loading', container).fadeOut(2000);});
});

それはかなりラフですが、洗練が必要かもしれませんが、基本的なコンセプトはそこにあります。

于 2012-09-14T16:05:05.197 に答える