Блог

Хорошо, это звучит как странный вопрос, но я использую jquery для создания ajax-запроса, чтобы я мог предварительно загрузить кучу изображений, затем я хочу показать все изображения, как только все будет загружено. Во время выполнения запроса на странице отображается анимированный загрузчик gif.

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

Это то, что я использую:

 var load_gallery = function(){
    var images = $.ajax({
        type : "POST",
        url: "/index.php/main/get_images",
        success: function(html){
            $("#gallery-images").html(html);
            $("#image-loader-animation").addClass('hide');
            $('#cat-selector-all').addClass('link-selected');               
        }
    });
}
  

Предполагается ли вышесказанное подождать, пока все в этом ajax-запросе загрузится, а затем отобразится на странице? Если нет, есть ли способ, которым я могу сделать этот ajax-запрос и подождать, пока все не будет полностью загружено, прежде чем отображать все это и скрывать загрузочный gif.

В основном ленивый загрузчик.

Спасибо

РЕДАКТИРОВАТЬ: я обновил его до use .load, похоже, у него все та же проблема… не уверен, что это правильно:

 var load_gallery = function(){
    $("#gallery-images").load('/index.php/main/get_images', function () {
        $("#gallery-images").show();
        $("#image-loader-animation").addClass('hide');
        $('#cat-selector-all').addClass('link-selected');
    });

}
  

РЕДАКТИРОВАТЬ: Это запрос … может быть, это потому, что я пока использую заполнители в качестве изображений?

     <div class="site gallery-webdev">
    <div class="image">
        <img src="http://placekitten.com/1000/700" />
    </div>
    <div class="description">
    asdf
    </div>
</div>
<div class="site gallery-webdev">
    <div class="image">
        <img src="http://flickholdr.com/1000/700" />
    </div>
    <div class="description">
    asdf
    </div>
</div>
<div class="site gallery-seo">
    <div class="image">
        <img src="http://lorempixum.com/1000/700/0" />
    </div>
    <div class="description">
    asdf
    </div>
</div>
<div class="site gallery-fd">
    <div class="image">
        <img src="http://placedog.com/1000/700" />
    </div>
    <div class="description">
    asdf
    </div>
</div>
<div class="site">
    <div class="image">
        <img src="http://placekitten.com/1000/700" />
    </div>
    <div class="description">
    asdf
    </div>
</div>
  

Функция успеха будет вызвана только в том случае, если ваш AJAX-запрос был успешным.

Если вы работаете на своем локальном компьютере, запросы выполняются быстро. Попробуйте скрипт и на вашем сервере.

Чтобы решить вашу проблему: можете ли вы показать нам свой запрос? Я бы подумал, что вы загружаете только часть, а не сами изображения.

Вы ajax только получаете html и помещаете его в нужный вам div. Это не загрузка изображений, потому что пока вы не разместите их на странице или не создадите объект изображения javascript, сервер не будет запрашивать их. Попробуйте использовать этот плагин вместо этого. Я беру Image.onload и создаю события для загруженного изображения. Не так давно я использовал его в проекте для отложенной загрузки, и он работает довольно хорошо.

Что касается счетчика, сделайте так, чтобы вы создали его перед запросом ajax / image, и они удалили его, как только все будет готово (независимо от того, успешно это или с ошибкой)

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

 $("#gallery-images").load(function () {
    $("#gallery-images").show();
});
  

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