如何從ajax（）成功數據等待圖像加載？

Question

我有jquery ajax()函數：

$.ajax({
    type: "POST",
    url: 'ajax.php',
    data: 'url='+variable,
    success: function(data){
        $('#mydiv').html(data);
    }
}); 

我的ajax響應（ data變量）與此類似：

<a id="90" href="mylink"><img src="myimagelink90.jpg" /></a>
<a id="91" href="mylink"><img src="myimagelink91.jpg" /></a>
<a id="92" href="mylink"><img src="myimagelink92.jpg" /></a>
<a id="93" href="mylink"><img src="myimagelink93.jpg" /></a>
<a id="94" href="mylink"><img src="myimagelink94.jpg" /></a>
<a id="97" href="mylink"><img src="myimagelink97.jpg" /></a>
<a id="98" href="mylink"><img src="myimagelink98.jpg" /></a>
<a id="120" href="mylink"><img src="myimagelink120.jpg" /></a>
<a id="121" href="mylink"><img src="myimagelink121.jpg" /></a>
<a id="122" href="mylink"><img src="myimagelink122.jpg" /></a>
<a id="123" href="mylink"><img src="myimagelink123.jpg" /></a>
<a id="124" href="mylink"><img src="myimagelink124.jpg" /></a>
<a id="125" href="mylink"><img src="myimagelink125.jpg" /></a>

所以我的問題是：等待myimagelink＃.jpg的最簡單方法是什么？

Answer 1

嘗試使用load()函數。 在這種情況下，您需要使用live()處理程序綁定它，因為圖像是動態加載的：

var loaded = 0;

$('#mydiv a img').live('load', function()
{
  loaded++;

  if (loaded == $('#mydiv a img').length)
  {
    alert('All of the images have loaded.');
  }
});

可能有一種更有效的方法來做到這一點，所以隨意說這可能有多慢。

Answer 2

你必須在每個上加上一個“onload”事件，遞增一些計數器並查看它是否與你插入的圖像數量相匹配。

Answer 3

您是否正在加載圖像，並希望在加載后顯示？

雖然'data'是包含字符串的javascript變量，但您的圖片不會加載...

要在將圖像插入頁面之前加載圖像，您必須使它們成為dom元素。

不知道它是否是最好的選擇，但我認為這是有效的：

$.ajax({
    type: "POST",
    url: 'ajax.php',
    data: 'url='+variable,
    success: function(data){
        $('<div />').html(data).load(function(){
            $(this).appendTo("#myDiv");
        })
}); 

Answer 4

就像是：

$.ajax({
  type:"POST",
  url: "ajax.php",
  dataType: "application/x-www-form-urlencoded",
  data: "url=" + variable,
  async: true,
  beforeSend : function(){
    $("#Loading").show(); //show image loading
  },
  success: function(msg){
    $("#LoadingPiloto").hide(); //hide image loading
  }
})