Скрыть загрузку gif после обратного вызова ajax

У меня есть простой вопрос, но я не смог найти чистый ответ. Мне нужно загрузить тяжелые изображения после вызова ajax, и я хочу использовать анимированный gif как предварительный загрузчик. Я использую следующий код:

function loadProducts(url) {
    $("#loading").show();
    $('#inner').fadeOut(1).load(url + ' .product-list', function() {
        $('#inner').fadeIn(1000, function() {
            $("#loading").hide();
        });
    });
}

#loading скрывается при загрузке HTML .load(url + ' .product-list'. Проблема в том, что тяжелые изображения все еще отображаются на экране, и я хотел бы продолжать показывать анимированный .gif до тех пор, пока рендеринг изображений не будет завершен. Есть ли способ узнать, когда отображаются изображения на экране?. Спасибо заранее.

Ответы

Ответ 1

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

Это создает обещание, которое разрешается при загрузке изображения, все promises хранятся в массиве, и когда все promises разрешаются, то есть все изображения загружаются, срабатывает обратный вызов.

function loadProducts(url) {
    $("#loading").show();

    $('#inner').fadeOut(1).load(url + ' .product-list', function() {

        var promises = [];

        $('#inner').find('img').each(function(_, image) {
            var img = new Image(), 
                def = new $.Deferred();

            img.onload = function() {
                def.resolve();
            }

            promises.push( def.promise() );

            img.src = image.src;
            if (img.complete) img.onload();
        });

        $.when.apply(undefined, promises).done(function() {

            $('#inner').fadeIn(1000, function() {
                $("#loading").hide();
            });

        });
    });
}

Ответ 2

Вы можете использовать ImagesLoaded

Использование образца

imagesLoaded( document.querySelector('#container'), function( instance ) {
  console.log('all images are loaded');
});
// selector string
imagesLoaded( '#container', function() {...});
// multiple elements
var posts = document.querySelectorAll('.post');
imagesLoaded( posts, function() {...});

Ответ 3

Вы можете попробовать использовать объект Image. Например:

function loadImage(url) {
  $("#loading").show();
  var img = new Image();
  img.src = url;
  img.onload = function(e) {
      $("#loading").hide();
      //ur code to append/show the image
  };
}

Ответ 4

Можно добавить/удалить загрузчик как класс? У меня база 64encoded загрузчик, поэтому нет предварительного загрузчика требуется. Это также использует закрытие, чтобы позволить счетчику запомнить его значение.

var imgDiv = document.getElementById("imgDiv");
imgDiv.onclick = (function () {
    "use strict";
    var count = 0;     // init the count to 0
    return function () {
        count++;       //count
        if (count === 1) {    // do something on first click
            $('.img-loader-content').addClass('loader');
            $('.imgDiv').load("images/img.jpg", function () {
                $('.img-loader-content').removeClass('loader');
            });
        }
        if (count > 1) {
            $('.imgDiv').slideToggle(400);
        }
    };
})
();

Ответ 5

самый подход к этому - использование onLoad, поэтому в основном после успешного вызова ajax вызовите другой вызов в функцию успеха:

http://www.w3schools.com/jsref/event_onload.asp

onload чаще всего используется внутри элемента для выполнения script после того, как веб-страница полностью загрузила весь контент (включая изображения, script файлы, файлы CSS и т.д.).

или использовать собственное решение следующим образом:

<img src="w3javascript.gif" onload="loadImage()">

http://www.w3schools.com/jsref/event_img_onload.asp

Также последний ответ на этот вопрос очень полезен в вашем случае:

Есть ли что-то похожее на` $(window).load(); `для выполнения функции после того, как вновь вставленное содержимое Ajax закончило загрузку?