Ожидание изображения для загрузки в JavaScript
Я выполняю вызов Ajax, который возвращает меня некоторая информация включая канал передачи изображения.
Я готовлю всю эту информацию в своем HTML, который будет отображен как своего рода всплывающее окно. Я просто переключаю видимость раскрывающимся отделением от скрытого до видимого.
Для установки позиции моего раскрывающегося отделения я должен вычислить в зависимости от высоты изображения. Так, я должен ожидать изображения для загрузки для знания его размера прежде, чем установить положение и переключить видимость на видимый.
Я попробовал приемы рекурсией, setTimeout, полным img свойством, цикл с условием продолжения... без успеха.
Так, как я могу сделать это? Возможно, я должен возвратить размеры в своем вызове Ajax.
2 ответа
var img = new Image();
img.onload = function() { alert("Height: " + this.height); }
img.src = "http://path/to/image.jpg";
Обратите внимание, что важно делать это в указанном выше порядке: сначала прикрепить обработчик, затем установить src. Если вы сделаете все наоборот, и изображение окажется в кэше, вы можете пропустить событие. JavaScript выполняется в браузерах в один поток (если вы не используете web workers), но браузеры не являются однопоточными. Вполне допустимо, чтобы браузер увидел src, определил, что ресурс доступен, загрузил его, вызвал событие, посмотрел на элемент, чтобы увидеть, есть ли у него обработчики, которые нужно поставить в очередь на обратный вызов, не увидел ни одного, и завершил обработку события, и все это между строкой src и строкой, прикрепляющей обработчик. (Обратные вызовы не будут происходить между строками, если они зарегистрированы, они будут ждать в очереди, но если их нет, то событие не должно ждать)
Если вы используете jQuery, вы можете использовать его событие load.
Посмотрите пример:
$('img.userIcon').load(function(){
if($(this).height() > 100) {
$(this).addClass('bigImg');
}
});