Знать, когда изображения загружаются в ответ AJAX

У меня есть функция jQuery ajax, которая загружает некоторый контент в div, некоторые из содержимого - это изображения. Я хотел бы сказать, пока те изображения, которые только что загружены в мой ajax, закончили загрузку, и THEN запустите функцию, например, показ содержимого. Таким образом, у меня не будет содержимого, загруженного в div, и начнется загрузка изображений. Я хочу, чтобы они были загружены, затем поместили контент или show() содержимое в div.

Я видел много решений для этого, например, используя .load(), но он не работает для содержимого, загруженного с помощью ajax.

Ответы

Ответ 1

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

$.ajax({
     ...
     success: function(data) {
          var imageCount = $(data).filter('img').length;
          var imagesLoaded = 0;
          $(data).hide()
                 .appendTo('#someDiv')
                 .filter('img')
                 .load( function() {
                     ++imagesLoaded;
                     if (imagesLoaded >= imageCount) {
                        $('#someDiv').children().show();
                     }
                  });
          setTimeout( function() { $('#someDiv').children().show() }, 5000 );
      }
});

Ответ 2

Это обновленная версия кода tvanfosson.

Вы должны убедиться, что переменная imageCount подсчитывает список node, а не строку, как это было в исходном коде, я могу вывести:

$.ajax({
    url      : 'somePage.html',  
    dataType : "html",
    success  : function(data) {

        $(data).hide().appendTo('#someDiv');

        var imagesCount = $('#someDiv').find('img').length;
        var imagesLoaded = 0;

        $('#someDiv').find('img').load( function() {
            ++imagesLoaded;
            if (imagesLoaded >= imagesCount) {
                $('#someDiv').children().show();
            }
        });

        var timeout = setTimeout(function() {
            $('#someDiv').children().show();
        }, 5000);
    }                     
});

Ответ 3

$("img").load() не будет работать, потому что изображения загружаются динамически; эта команда будет применяться только к изображениям на странице в то время.

используйте $("img").live("load") для отслеживания загрузки изображений.