ajaxを使用して追加された画像を待つ

Question

$.post("service.php", { GetStartpageImages : true },function(data) { 

    $.each(data,function(i, value){ 

     var path = "uploads/thumb_" + value.Filename; 

     $('.startpage-images').append(
     '<div class="imagewrapper clearfix">' + 
      '<a class="imagelink" href="?p=photo&id=' + value.ID + '">' + 
       '<img src="'+ path +'"/></a>' + 
       '<div class="imageinfo alpha70">'+ value.UploadTimestamp +'</div>' + 
      '</a>' + 
     '</div>'); 

    }); 
}); 

一度ロードしたら表示できますか？ $(window).load..私のために働いていない。

$.post("service.php", { GetStartpageImages : true },function(data) { 

    $.each(data,function(i, value){ 

     var path = "uploads/thumb_" + value.Filename; 

     $('.startpage-images').append('<div class="imagewrapper clearfix">' + 
     '<a class="imagelink" href="?p=photo&id=' + value.ID + '">' + 
      '<img src="'+ path +'"/></a>' + 
      '<div class="imageinfo alpha70">'+ value.UploadTimestamp +'</div>' + 
     '</a>' + 
     '</div>'); 


     function imgLoadCallback(){ 
      $('.imagewrapper').show(); 
     } 

     var img = new Image(); 
     img.addEventListener('load', imgLoadCallback, false); 
     img.src = path; 


    }); 
}); 

：ありがとう

Answer 1

にそれを設定します。この

$.each(data,function(i, value){ 
    var path = "uploads/thumb_" + value.Filename; 
    $('.startpage-images').append(
    '<div class="imagewrapper clearfix">' + 
     '<a class="imagelink" href="?p=photo&id=' + value.ID + '">' + 
     '<img data-src="'+ path +'"/></a>' + 
      '<div class="imageinfo alpha70">'+ value.UploadTimestamp +'</div>' + 
      '</a>' + 
     '</div>'); 
}); 

$('.startpage-images img').each(function() { 
    $(this).attr("src", $(this).attr("data-src")); 
}); 

ような何かをするだろう上記のコードは、あなたのCSSには.imagewrapper {display:none}があることを前提としています。イメージが完全に読み込まれると、imgLoadCallback()が呼び出されます。ユーザーがキャッシュにイメージを持っていても、そのイメージはまだ呼び出されます（その場合は直ちに）。

Answer 2

私はので、私はこれはそれを行う必要がありますATTR data-srcを設定し、最後にsrc

Answer 3

'<div class="imageinfo alpha70">'+ value.UploadTimestamp +'</div>' 

これがなければ.loadメソッドが機能しました。なぜか、何かjqueryのバグかもしれません。