javascript - ajaxアクションで画像が完全に読み込まれるのを待ちます

Question

私のページには、左に画像、右にテキストを含むajaxをロードするアクションがあります。div

問題: 最初にテキストが読み込まれ、左側 (左揃え) で、次に画像が読み込まれ、テキストが右側に移動します。これは実際には滑らかではありません。

私は次のようなものを試しました:

$('div#to_load').ready(function() {
    $('div#to_load').fadeIn();
});

しかし、それは役に立ちません。

私に何ができる？

Answer 1

アップデート

ここにあるこのトリックを試す必要があると思います：

$("<img />", { src:"thelinkofyourimage"}).appendTo("div#to_load").fadeOut(0).fadeIn(1000);

このフィドルを見てください：http://jsfiddle.net/qYHCn/。

Answer 2

jQuery でスムーズにアニメーション化できます (jQuery で ajax リクエストを実行している場合はとにかく便利です):

jQuery

$("body").prepend('<img src="http://placehold.it/150x150" alt="img">');
$("img").animate({
    opacity: 1,
    left: 0
}, 700);

CSS

img {
    float: left;
    margin-right: 0.8em ; 
    left: -300px;
    position: relative;
}

フィドル。

Answer 3

一度にではなく、画像とテキストを別々にロードしてみてください。

また、シフトの問題については、画像を別の div 内に配置し、読み込み時のサイズを定義します。次に、画像 div 用のスペースを既に与えているため、テキストを画像スペースに入れることはできません。

サンプルコード

$('#ImageID')
 .load(
      function(){
           //Do stuff once the image specified above is loaded
           $('#textId').html('your text');
      }
 );