не стреляйте после AJAX-запроса.

аюсь выполнить 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);
    }
});

Ответы на вопрос(10)

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

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

 robs23 янв. 2011 г., 17:27
Дело в том, что я не могу отключить асинхронные вызовы с загрузкой и установить параметры кэша правильно?

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

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

    }
});

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

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

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

    }
});

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

 kobe31 мар. 2013 г., 19:30
@alex, могу ли я использовать это для добавления, в основном я делаю бесконечную прокрутку и добавляю элементы в существующий контейнер вместе с другими изображениями
 ajreal04 мая 2012 г., 10:26
действительно хорошие плагины, которые решают проблему кладки
 kobe31 мар. 2013 г., 20:16
@alex, большое спасибо за твой плагин, я дал свой контейнер div в append, и он отлично работает

что лучше всего использовать это

$(window).ready(function(){ //load your ajax})
 Chuck D30 июл. 2011 г., 08:09
Этот метод более общий, но я считаю, что он отлично работает!
 Andreyco28 мар. 2012 г., 12:12
Это не будет работать, так как$(document).ready() а также$(window).load() не стреляйте после AJAX-запроса.

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

$.ajax({
    url: "../api/listings",
    type: 'GET',
    success: function (html) {
        $('#container').append(html);
        $('#container img').on('load', function(){console.log('images loaded')});
    };
});
$('#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);
    }
});
});

это срабатывает на каждую загрузку IMG отдельно:

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

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

var loaded = 0;
$('img').on('load', function() {
   loaded++;
   if(loaded == $('img').length){
      // do something
   }
});
Решение Вопроса

который написал @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-адреса), обещание все равно разрешается, а ошибка игнорируется. Это может быть тем, что вы хотите, но, в зависимости от вашей ситуации, вы можете вместо этого захотеть прервать все, что вы делаете, если изображение не загружается. В этом случае вы можете заменить строку ошибки следующим образом:

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
});
 Daniel Howard08 сент. 2015 г., 09:15
Хороший вопрос @YM_Industries - я обновил код, чтобы включить ваше предложение.
 Daniel Howard15 июл. 2015 г., 09:57
@MarkEntingh - вы можете быть правы насчет утечки памяти - я не уверен. Как только обещание выполнено, остаются ли ссылки на объект Image в замыкании? Я не думаю, что есть, поэтому JS должен собрать мусор. Если вас это беспокоит, вы можете использовать массив объектов Image, определенных вне функции, и явно удалить их в своей функции then. Обратите внимание - вы сказали «дубликат каждого изображения на странице» - это только в том случае, если вы примените его ко всему документу - $ (document) .imagesLoaded (). Часто это будет небольшое подмножество или просто одно изображение.
 Daniel Howard05 нояб. 2015 г., 09:17
@Kril, если вам нужно также включить фоновые изображения, вам нужно будет найти способ поиска всех используемых фоновых изображений по элементам 'this' и добавить их в массив $ imgs в начале.
 Daniel Kim05 дек. 2013 г., 19:52
Это прекрасно работает! Благодарю.
 Joshua Walsh28 авг. 2015 г., 06:53
Я рекомендую также обрабатывать событие onerror, иначе обратный вызов может никогда не быть вызван.

чтобы знать, когда они закончатся:

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

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

 Linas29 июн. 2012 г., 10:53
о боже, ты не представляешь, как сильно мне помогли, я искал решение в течение нескольких часов ... большое спасибо: D
 UpTheCreek29 мар. 2013 г., 11:15
.on (), по-видимому, теперь рекомендуется вместо .bind ()

когда плагин из решения Дэниела не находит никаких изображений.

На тот случай, если некоторые другие получат такую ​​же проблему:

Изменить:

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

Кому:

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

Ваш ответ на вопрос