0

ajax呼び出し後に画像が読み込まれた後、画像をフェードインしたいと思います。
このようにして、ユーザーが画像の読み込みを監視する代わりに、フェードが実際に発生します。

誰か助けてくれませんか？

JS スニペットは次のとおりです。

success: function(data){
    $('.main-content').load(function() {
      $(data).hide().prependTo('.main-content').fadeIn('slow');
    });
    return false;
},

データは、次のようなものをエコーする php から取得されます。

<div class='left-col-box'>
  <div class='album_image'>
    <div class='image_settings'>
      <button class='delete_button' id='11'>Delete</button>
    </div>
    <img src='/includes/thumber.php?file=../img/$next_id.$ext&width=218&height=218' />
  </div>
</div>

2 つの画像がアップロードされた場合、2 つのロードされたボックスに対して 2 つの left-col-box 文字列が存在する可能性があります。
の前に画像をロードしたいと思いfadeInます。

4

2 に答える 2

0

dataコールバック内のが生成された HTML である場合successは、まずそれをアタッチしてから非表示にし、フェードインする必要があります。

その時点ではまだDOMにないため、$(data).hide()期待どおりに機能するかどうかはわかりません。data

次のことを試してください（負荷は必要ないと思います）：

success: function(data){
    $(data).prependTo('.main-content').find('div.album_image img').hide().fadeIn('slow');
    return false;
},

デモ- 上記のコードを使用して、画像を読み込み、ゆっくりとフェードインします

上記の DEMO は、提案されたコードを使用し、生成された HTML を先頭に追加し、イメージ タグを見つけて非表示にし、ゆっくりとフェードインします。

もちろん、imgタグを事前に隠して生成する場合、たとえば adisplay: noneまたは類似のものを使用する場合、必要なのは次のとおりです。

$(data).prependTo('.main-content').find('div.album_image img').fadeIn('slow');
于 2013-01-12T09:51:07.173 に答える
0 
 loader.show()  //show some loading image
 $('img',data).load(function(){
      loader.hide //hide loader once img is loaded
          $(data).prependTo('.main-content');
       }
于 2013-01-12T09:49:27.543 に答える