Как вычислить высоту картинки, подгруженной через Ajax?
Есть изображение, подгруженное на страницу через Ajax jquery:
<div id="content"> <img src="..." alt="" id="contentImg"> </div> |
<div id="content"> <img src="..." alt="" id="contentImg"> </div>
Нужно через метод height() jquery вычислить высоту изображения #contentImg. Обращение вида $("#contentImg").height() не работает. Как обратиться к данному изображению?
Дополнительно:
Обращение вида $("#contentImg").height() не работает.
А где размещено это обращение?
Попробуйте в success после получения ответа и отрисовки изображения вставить
console.log($("#contentImg").height());
- Пробовал так в succsess делать - console.log($("#contentImg").height()) возвращает 0. Единственное, может это из-за того, что не дожидался отрисовки самой картинки. А как в JQuery можно дождаться отрисовки?
- Из простого, могу посоветовать SetTimeout
Но это костыль
Вернее будет использовать MutationObserverСсыль с инфо
- Все сделал, пашет) Дожидаюсь загрузки изображения вот так:
var img = new Image(); img.src = "путь к картинке"; img.onload = function(){ console.log($("#contentImg").height()); }
var img = new Image(); img.src = "путь к картинке"; img.onload = function(){ console.log($("#contentImg").height()); }
Спасибо за наводки :)
Ответы:
видимо имеется ввиду naturalHeight, как обратиться к нему через jQuery не знаю, но всегда есть$('selector')[0].naturalHeight, правда зачем тогда этот самый jQuery
- Нет, загвоздка в том, что Jquery не видит контента, подгруженного через Ajax, и обращение $('selector') не сработает вообще.
- Konyuh, так что загружается: изображение или кусок разметки с изображением внутри?
- IvanU7n, вообще загружается вся разметка с изображением, да.
- Konyuh, тогда разметку нужно добавить в документ и тогда всё внутри неё будет доступно, по крайней мере для стандартных DOM-методов, без этого шага это просто кусок текста
- Konyuh, надо воткнуть этот кусок хтмл куда-нибудь на страницу, картинка подгрузится (надо дождаться этого момента) и ты сможешь глянуть naturalHeight
- Дело в том, что контейнер, в который подгружается разметка, имеет фиксированную высоту height 120 px, заданную в css.
- Konyuh, и? не вижу вообще проблем в фиксированной высоте контейнера, картинка всё равно должна подгрузиться, если конечно какой-то вариант ленивой загрузки не применён, но тогда это отдельная тема
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы вычислить высоту картинки, подгруженной через Ajax, нужно выполнить несколько шагов.
1. Получить ссылку на изображение после его загрузки через Ajax.
2. Создать временный объект Image() и присвоить ему эту ссылку.
3. Дождаться загрузки изображения и получить его высоту.
Пример кода на JavaScript:
// URL изображения var imageUrl = 'http://example.com/image.jpg'; // Создаем временный объект Image() var img = new Image(); // Устанавливаем src изображения img.src = imageUrl; // Дожидаемся загрузки изображения img.onload = function() { // Получаем высоту изображения var height = img.height; // Используем полученную высоту для дальнейших действий console.log('Высота изображения: ' + height); };
Таким образом, после загрузки изображения через Ajax, вы сможете вычислить его высоту и использовать эту информацию для дальнейших манипуляций с изображением.