Знать, когда новые элементы HTML полностью загружаются с помощью .load ()

Question

У меня есть некоторые проблемы с .load() функцией jquery, я стараюсь предварительно загрузить некоторый HTML в скрытый блок, чем когда все новые элементы загружены, я хочу переместить его в дерево dom. это мой сценарий

var preloader = $(document.createElement("div")).attr('id', 'msgloader').css({ visibility: "visible"}); // visible is just for test it 
preloader.html( newHtml ); // newHtml is a string with html elements like images table etc.
$("body").append(preloader);
preloader.load(function() { alert("div is ready"); });

я не знаю почему, но когда новый HTML в msgloader готов и полностью загружен, никогда не выдает сообщение alert() знаете ли вы, где я делаю ошибку?

Answer 1

Есть причина, по которой вы не могли бы сделать это в готовом документе?Поскольку вы изменяете dom напрямую, ваши изменения должны быть доступны немедленно, поэтому load () никогда не запускается, потому что он настраивается после того, как вы уже добавили код.

Answer 2

См. Предостережения для метода загрузки :

Предупреждения о событии загрузки при использовании с изображениями

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

• Он не работает согласованно и надежно кросс-браузер
• В WebKit не срабатывает корректно, если для src изображения установлено то же значение src, что и раньше
• Не правильно всплывает дерево DOM
• Может перестать срабатывать для изображений, которые уже находятся в кеше браузера

Это не особенно надежный способ определения, когда все содержимое элемента завершило загрузку. Вы можете рассмотреть возможность использования метода перегруженной загрузки для загрузки html-кода из URL-адреса и добавления в DOM после завершения загрузки (или, в качестве альтернативы, просто добавить в DOM на DOM ready).

Answer 3

.load() для загрузки данных с сервера. Когда вы просто .append() немного HTML, он сразу готов. Ваша load() функция не показывает предупреждение, потому что она не load ничего.