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

6

После того, как я сделаю ajax-запрос, сделав что-то простое, как$(element).load(url, callback); на странице будет новый контент, содержащий изображения и тому подобное.

Есть ли способ сделать что-то похожее на$(window).load(callback) после завершения загрузки нового контента?

$(window).load(); хорошо работает, когда страница свежая, так что вы можете отображать анимацию загрузки до тех пор, пока не будет загружен весь контент, но что-то простое, как это, кажется, отсутствует при загрузке контента после$(window).load() уже был запущен.

EDIT 6/6/12 11:55pm: Я думаю, что все неправильно понимают мой вопрос. Позвольте мне объяснить немного лучше:

Когда вы впервые загружаете страницу, вы можете воспользоваться этими двумя событиями с помощью jQuery:$(document).ready(); а также$(window).load();, Первый срабатывает, когда DOM готов, а второй срабатывает, когда контент загружен (изображения и т. Д.). После обновления страницы с помощью jQuery.load() метод, я полностью знаю, что я могу передать обратный вызов, который будет выполнен после завершения Ajax.

То естьnot что я хочу. Я хочу выполнить функцию после того, как новый контентfinished loadingаналогично тому, когда$(window).load(); срабатывает после завершения загрузки начального содержимого страницы.

Имеет ли это смысл? Как мы можем создать событие, подобное$(window).load(); для выполнения каких-либо действий после загрузки содержимого Ajax (not только после того, как HTML был вставлен)?

@RayCheng Пожалуйста, смотрите мой обновленный вопрос. trusktr
я недавно попробовал то же самое, но он не работает, вместо этого выберите div и поместите ваш новый контент HTML, который является альтернативой Muhammad Raheel
Как ответы (обратный вызов ajax или глобальный ajaxComplete) пока не соответствуют вашим требованиям? Ray Cheng
Вы не можете обновить свой вопрос и ожидать, что люди ответят повторно. Raab
Вы просто хотите отобразить & quot; загрузку ... & quot; во время вызова AJAX? Ray Cheng

Ваш Ответ

5   ответов
1

Вы можете сделать это таким образом.

$(document).ready(function () {
    $(document).ajaxComplete(function () { alert('ajax completed.') });
    $('#d').load("url-to-page", function (response, status, xhr) {
        if (status == "error") {
            var msg = "Sorry but there was an error: ";
            alert(msg + xhr.status + " " + xhr.statusText);
        }
    });
});
Error: User Rate Limit Exceeded trusktr
1

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

0

что вы не сделали. Вам просто нужно вызвать успешное событие ajax, которое будет выполнено после завершения ajax. Это достаточно для вас. Вам не нужны такие события, как .load () для конкретных элементов, возвращаемых ajax. Но вы можете попытаться прикрепить событие load () к элементу, например, после того, как сервер вернет html, но до его вставки в DOM

Error: User Rate Limit Exceeded trusktr
4

The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

Итак, после того, как DOM был обновлен (например, с помощью содержимого Ajax), я устанавливаю прослушиватель для «загрузки». события на всех вновь вставленных изображениях:

function when_images_loaded($img_container, callback) { // do callback when images in $img_container (jQuery object) are loaded. Only works when ALL images in $img_container are newly inserted images and this function is called immediately after images are inserted into the target.
    var _imgs = $img_container.find('img'),
        img_length = _imgs.length,
        img_load_cntr = 0;

    if (img_length) { //if the $img_container contains new images.
        _imgs.on('load', function() { //then we avoid the callback until images are loaded
            img_load_cntr++;
            if (img_load_cntr == img_length) {
                callback();
            }
        });
    }
    else { //otherwise just do the main callback action if there's no images in $img_container.
        callback();
    }
}

Это удобно для того, чтобы содержимое оставалось скрытым до тех пор, пока изображения не будут готовы. Если у вас есть фоновые изображения, которые будут отображаться в качестве фоновых изображений, это не сработает. Обходным решением будет загрузка всех изображений, которые вы используете в своих стилях CSS, в контейнер, который останется скрытым, так что вышеуказанная функция позволит вам загружать изображения. После того, как все изображения загружены, вы можете удалить элемент, содержащий ваши изображения только для CSS, и таким образом браузер будет отображать фоны (и т. Д.) Мгновенно, когда вы раскроете свой контент.

1
$(element).load(url, function(){
  //this code is executed after the page is loaded
})

Error: User Rate Limit Exceeded trusktr

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