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

После того, как я сделаю 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 был вставлен)?

Ответы на вопрос(5)

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

Решение Вопроса

Согласно JQuery:

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, и таким образом браузер будет отображать фоны (и т. Д.) Мгновенно, когда вы раскроете свой контент.

Похоже, вы ищете глобальный подход для обработки всех событий AJAX. Вы можете сделать это таким образом.

$(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);
        }
    });
});
$(element).load(url, function(){
  //this code is executed after the page is loaded
})

Это то, что вы имеете в виду?

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

Ваш ответ на вопрос