Скажем, у меня есть страница index.html, на которой выполняются мои скрипты, и страница content.html, которая представляет собой очень большой, богатый документ, полный изображений и стилизованного текста. Я загружаю содержимое content.html в <div id="container"></div> на моем index.html с:
$.get("content.html", function(data, textStatus, jqXHR) {
$("#container").html(data);
contentLoadedCallback();
});
В приведенном выше примере contentLoadedCallback() вызывается, как только html-содержимое вставляется в контейнер. Но что, если я хочу сделать что-то в этом обратном вызове, которому нужно знать полную высоту контейнера, например инициализировать пользовательскую полосу прокрутки? $("#container").height() пока не будет точным, потому что все изображения только начали загружаться, и они будут менять высоту содержимого по мере загрузки.
Я сейчас использую https://github.com/desandro/imagesloaded, чтобы определить, когда все изображения в контенте были загружены, а затем запустили мой обратный вызов. Однако это все замедляет ... моя страница имеет большое сообщение "loading ..." над контейнером за все время, необходимое для загрузки каждого изображения.
Я могу сказать, что документ, похоже, «знает» высоту каждого изображения до его загрузки, потому что, как только изображение начинает загружаться, остальная часть страницы перемещается, чтобы дать ему только необходимое количество места. Изображение получает свой собственный «контейнер» правильного размера, а затем изображение постепенно загружается в это пространство. В идеале я хочу захватить событие, когда этот «контейнер» изображения находится на месте, не дожидаясь полной загрузки самого изображения. И я хотел бы соединить это с возможностью определения полной конечной высоты (возвращаясь к моему примеру выше) #container, как можно скорее после того, как я начну загружать в нее контент.
Возможно ли то, что я пытаюсь сделать?