jQuery Ajax wait, пока все изображения не будут загружены

Question

Я пытаюсь выполнить вызов Ajax с jQuery, который работает хорошо. Я использую событие успеха для отображения данных. Кажется, однако, что успех запускается, как только загружается внешний HTML-файл. Если есть большие изображения, они продолжают загружаться после их показа. Есть ли способ отображать содержимое после того, как все будет полностью загружено? Вот код:

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

Answer 1

Плагин, который написал @alex, по какой-то причине не работал для меня ... Я не мог понять, почему. Но его код вдохновил меня придумать более легкое решение, которое работает для меня. Он использует обещания jquery. Обратите внимание: в отличие от плагина @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's 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 
}); 

Answer 2

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

который имеет описание:

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

Answer 3

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

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

Или вы могли бы использовать this plugin.

Answer 4

$('#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); 
    } 
}); 
}); 

Answer 5

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

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

Answer 6

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

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

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

    } 
}); 

Это будет загружать материал в свой элемент, скрывать , а затем перетащите его после того, как потоки img загружены.

Answer 7

это вызывает на каждом Img нагрузки отдельно:

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

я использовал :

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

Answer 8

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

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

Answer 9

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

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

    } 
}); 

Answer 10

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

Только в случае, если некоторые еще получить тот же вопрос:

Изменение:

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

To:

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