Вопрос по ajax, image, jquery – JQuery ждать, пока страница AJAX полностью загружена

1

Я использую AJAX для отображения содержимого страницы B на странице A.

Как я могу заставить jQuery ждать, пока все загрузится (текст, изображения и т. Д.), Прежде чем отобразится содержимое?

$.ajax({
    url:"pageB.html",
    beforeSend: function() {
        //show loading animation here
    }
    success: function(data) {
        //hide loading animation here
        $("body").append(data);
    }
});

Я использую beforeSend, чтобы показать пользователю анимацию загрузки, когда обрабатывается AJAX-запрос. Теперь я хочу "продлить" время ожидания, чтобы анимация загрузки не исчезала до тех пор, пока не будут загружены все изображения.

I tried to initially hide appended data, wait for all images to load and then show content - $("body").on("load", "images class here", function() {//show content}) внутриsuccess но событие не похоже на огонь.

Есть идеи?

ОБНОВИТЬ:

Обновленный код:

$.ajax({
    url:"pageB.html",
    beforeSend: function() {
        //show loading animation here
    }
    success: function(data) {
        //hide loading animation here
        $("body").append(data);
        $("body").on("onload", "img", function() {//display content});
    }
});

Ваш Ответ

2   ответа
0

ений. Поэтому, как только вы получите успешный обратный вызов, найдите все изображения, добавьте & quot;onload& Quot; событие и рассчитать, как только все изображения были загружены.

@Jonathan Я тоже пробовал раньше, но безуспешно. Eleeist
Типы событий @Eleeist с jQuery обычно не используютon префикс. Так что это просто"load": $("body").on("load", "img", function() { });
Я обновил свой вопрос новым кодом. Давайте пока предположим, что загружено только 1 изображение. Это правильный код? Кажется, это не работает вообще. Eleeist
4

$("body img").on("load", function () { });
$("body .image-class").on("load", function () { });

Вместо делегированного связывания:

$("body").on("load", "img", function() { });
$("body").on("load", ".image-class", function () { });

Делегированные привязки зависят от всплытия событий, что не каждое событие делает. И, похоже,"load" событие - по крайней мере, из<img> - это тот, который не 't.

Пример:http://jsfiddle.net/DLy6j/

Именно то, что я искал. Спасибо :) Eleeist
отличное описание того, как работает переплет
Безусловно лучший вариант! Спасибо!

Похожие вопросы