JQuery Ajax дождитесь загрузки всех изображений

Ответ 1

Плагин, который написал @alex, по какой-то причине не работал у меня... Я не мог понять, почему. Но его код вдохновил меня придумать более легкое решение, которое работает для меня. Он использует jquery promises. Обратите внимание, что в отличие от плагина @alex, это не пытается учесть фоновые изображения на элементах, только элементы img.

// Fn to allow an event to fire after all images are loaded
$.fn.imagesLoaded = function () {

    // get all the images (excluding those with no src attribute)
    var $imgs = this.find('img[src!=""]');
    // if there no images, just return an already resolved promise
    if (!$imgs.length) {return $.Deferred().resolve().promise();}

    // for each image, add a deferred object to the array which resolves when the image is loaded (or if loading fails)
    var dfds = [];  
    $imgs.each(function(){

        var dfd = $.Deferred();
        dfds.push(dfd);
        var img = new Image();
        img.onload = function(){dfd.resolve();}
        img.onerror = function(){dfd.resolve();}
        img.src = this.src;

    });

    // return a master promise object which will resolve when all the deferred objects have resolved
    // IE - when all the images are loaded
    return $.when.apply($,dfds);

}

Затем вы можете использовать его примерно так:

$.ajax({
    cache: false,
    url: 'ajax/content.php',
    success: function(data) {
        $('#divajax').html(data).imagesLoaded().then(function(){
            // do stuff after images are loaded here
        });
    }
});

Надеюсь, это поможет кому-то.

Обратите внимание, что с использованием вышеуказанного кода, если одна из ошибок изображения (например, потому что URL-адрес был неправильным), обещание все равно разрешено, и ошибка игнорируется. Это может быть то, что вы хотите, но, в зависимости от вашей ситуации, вы можете вместо этого отказаться от того, что вы делаете, если изображение не загружается. В этом случае вы можете заменить строку onerror следующим образом:

img.onerror = function(){dfd.reject();}

И поймаем ошибку следующим образом:

$('#divajax').html(data).imagesLoaded().done(function(){
    // do stuff after all images are loaded successfully here
}).fail(function(){
    // do stuff if any one of the images fails to load
});

Ответ 2

Вы можете использовать мой плагин jQuery, waitForImages...

$.ajax({
    cache: false,
    url: 'ajax/content.php',
    success: function(data) {

         $('#divajax').html(data).hide().waitForImages(function() {
             $(this).show();
         });

    }
});

Это загрузит материал в ваш элемент, спрячет его, а затем восстановит его после загрузки потомков img.

Ответ 3

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

$('<img>').bind('load', function() {
    $(this).appendTo('body');
});

Или вы можете использовать этот плагин.

Ответ 4

это срабатывает при каждой загрузке img отдельно:

$('img').on('load', function() {
      // do something
});

i:

var loaded = 0;
$('img').on('load', function() {
   loaded++;
   if(loaded == $('img').length){
      // do something
   }
});

Ответ 5

Вы можете использовать imagesloaded плагин, который работает с JavaScript и jQuery, попробуйте использовать внутри ajax success функция обратного вызова на загруженном содержимом и скрыть весь контент, в то время как функция imagesloaded callback не запускается, см. ниже пример кода

$.ajax({
    cache: false,
    url: 'ajax/content.php',
    success: function(data) {
        var $divajax = $('#divajax').html(data).hide();
        $divajax.imagesLoaded(function() {
             $divajax.show();
         });

    }
});

Ответ 6

Посмотрите на использование jquery.load()

Что имеет описание:

Событие загрузки отправляется элементу, когда он и все подэлементы были полностью загружены. Это событие может быть отправлено любому элементу, связанному с URL: изображениями, сценариями, фреймами, iframe и объектом window.

Ответ 7

$('#divajax').html('<br><div style="text-align: center;"><img src="res/ajax-loader.gif"></div>').load(function() {
$.ajax({
    cache: false,
    url: 'ajax/content.php',
    success: function(data) {
          $('#divajax').html(data);
    }
});
});

Ответ 8

Попробуйте этот код. Он отлично работает.

$.ajax({
    url: "../api/listings",
    type: 'GET',
    success: function (html) {
        $('#container').append(html);
        $('#container img').on('load', function(){console.log('images loaded')});
    };
});

Ответ 9

У меня есть небольшая ошибка, когда никакие изображения не найдены плагином из решения Daniel.

На всякий случай, если кто-то другой получит ту же проблему:

Изменить:

// if there no images, just return an already resolved promise
if (!$imgs.length) {return $.Deferred.resolve().promise();}

To:

// if there no images, just return an already resolved promise
    if (!$imgs.length) {
        var dfd = $.Deferred();
        return dfd.resolve().promise();
    }

Ответ 10

Я думаю, что лучше всего использовать этот

$(window).ready(function(){ //load your ajax})