Определите, когда ресурсы загружаются через ajax

Question

Недавно я спросил, как определить, когда были загружены все ресурсы страницы, такие как изображения и таблицы стилей. Ответ вернулся, используйте $ (window) .load (); метод в jQuery.

Мой вопрос сейчас заключается в том, как определить, когда загрузка контента завершена через AJAX. AJAX внедряет некоторые элементы img, скажем, в DOM ... как узнать, когда эти изображения закончили загружаться?

Answer 1

Если вы звоните $. Ajax , вы можете установить функцию обратного вызова для успешного запроса:

$.ajax({
    url: _url,
    type: _type,
    data: _data,
    dataType: _dataType,
    success: _success
})

var _success = function(result) {
    $html = $(result);
    alert('HTML downloaded');

    // inject HTML into DOM here
}

Вам нужно пройти через $ html, чтобы получить элементы изображения, и для каждого из этих изображений зарегистрировать обратный вызов функции загрузки, который срабатывает при загрузке изображения:

$('#myImage').load(function() {  
    alert('Image Loaded');  
});

Answer 2

В функции $.get() или $.post() вы можете указать имя функции, которая будет вызываться после завершения запроса ajax. Например:

$.get("something.php",{data:'test'},foo);

function foo()
{
   // This function will be called when the request has completed
}

Или:

$.get("something.php",{data:'test'},function()
  {
    //This function will be called in the same way
  }

);

Answer 3

Обнаружение, когда выборка ajax проста: используйте События Ajax, определенные в jQuery: http://docs.jquery.com/Ajax

Но я не уверен, что вы спрашиваете то же самое. Чтобы определить, когда изображение завершает загрузку (предположительно, это будет равно событию при изменении атрибута src изображения), вы можете использовать события мутации. http://wiki.github.com/jollytoad/jquery.mutation-events веселит,

JRH.