Как ждать загрузки изображения из данных успеха 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

Что-то вроде:

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

Answer 3

Вы загружаете изображения динамически и хотите отображать их после загрузки?

Хотя «data» - это переменная javascript, содержащая строки, ваши изображения не будут загружаться ...

Чтобы загрузить изображения перед вставкой их на страницу, вам нужно будет сделать их из элементов.

Не знаю, будет ли это лучшим вариантом, но я думаю, что это работает:

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

Answer 4

Вам нужно было бы добавить событие onload для каждого, увеличить счетчик и посмотреть, соответствует ли оно количеству вставленных вами изображений.