Этот запрос ajax действительно что-то делает?

Question

Хорошо, это звучит как странный вопрос, но я использую 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.

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

Спасибо

РЕДАКТИРОВАТЬ: я обновил его, чтобы использовать .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>

Answer 1

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

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

Answer 2

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

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

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

Answer 3

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

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

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