等待使用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..沒有爲我工作。由於

Answer 1

這應做到：

$.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; 


    }); 
}); 

上面的代碼假設你的css中有.imagewrapper {display:none}。圖像完全加載後，imgLoadCallback()將被調用。即使用戶在緩存中有圖片，它仍會被調用（在這種情況下，立即）。

Answer 2

我會做這樣的事情

$.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")); 
}); 

，所以我將設置ATTR data-src，並在年底將其設置爲src

Answer 3

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

沒有這個.load方法的工作。不知道爲什麼，可能是一些jQuery的bug。