jQuery load-событие после replaceWith

Question

Я пытаюсь ajax загрузить некоторый контент, а затем заменить существующий контент на странице новым загруженным контентом. Проблема в том, что мне нужно связать событие load(handler(eventObject)) для замененных данных. Мне нужно, чтобы вызвать, когда все изображения загружены. Вот что у меня пока так:

$("#mainContentHolder").live("load", function(){ 
   alert("images loaded!") 
});

$.get("content.htm", function(data){
    $("#mainContentHolder").replaceWith(data);
    alert("content is loaded!");
});

Я вижу предупреждение при загрузке контента, но это происходит до загрузки изображений, а оповещение о загрузке изображений никогда не происходит (я также пробовал bind() вместо live() раньше). Кто-нибудь знает, как это исправить?

Answer 1

Это может быть или не быть вашей проблемой, но похоже, что контейнер, к которому вы прикрепили свою функцию загрузки изображений, заменяется при загрузке содержимого ajax:

$("#mainContentHolder").live("load", function(){ //you are attaching to current and future '#mainContentHolder' elements
   alert("images loaded!") 
});

$.get("content.htm", function(data){
    $("#mainContentHolder").replaceWith(data);  //'#mainContentHolder' element is replaced with something else
    alert("content is loaded!");
});

Не уверен, какой контент возвращается из вашего вызова AJAX, но если у него нет элемента #mainContentHolder, обработчику событий загрузки изображения будет нечего присоединить.

Если это не так, есть и этот бит: (от http://api.jquery.com/load-event/)

Возможно, событие загрузки не будет запущено, если изображение загружено из кэша браузера. Чтобы учесть эту возможность, мы можем использовать специальное событие загрузки, которое запускается немедленно, если изображение готово. event.special.load - в настоящее время доступен как плагин .

Надеюсь, один из них вам поможет.

Answer 2

Можно ли поместить $ .get в функцию live load?

$("#mainContentHolder").live("load", function(){ 
   alert("images loaded!");
$.get("content.htm", function(data){
    $("#mainContentHolder").replaceWith(data);
    alert("content is loaded!");
});
});