Ожидание загрузки изображения в Javascript

Я делаю вызов Ajax, который возвращает мне некоторую информацию, включая путь к изображению. Я готовлю все эти данные в своем HTML, который будет отображаться как своего рода всплывающее окно. Я просто переключаю видимость по всплывающему div от скрытого до видимого.

Чтобы установить позицию моего всплывающего div, я должен рассчитать в зависимости от высоты изображения. Таким образом, я должен дождаться загрузки изображения, чтобы узнать его размер, прежде чем устанавливать положение и переключать видимость на видимый.

Я пробовал трюки с рекурсией, setTimeout, полным свойством img, while loop... без успеха.

Итак, как я могу это сделать. Возможно, мне нужно вернуть измерения в мой вызов Ajax.

Ответы

Ответ 1

var img = new Image();
img.onload = function() { alert("Height: " + this.height); }
img.src = "http://path/to/image.jpg";

Обратите внимание, что это важно сделать в следующем порядке: Первый привязать обработчик, , затем установить src. Если вы делаете это наоборот, и изображение находится в кеше, вы можете пропустить это событие. JavaScript работает в одном потоке в браузерах (если вы не используете веб-работников), но браузеры не однопоточные. Совершенно верно для браузера, чтобы увидеть src, определить ресурс, загрузить его, запустить событие, посмотреть на элемент, чтобы увидеть, есть ли у него какие-либо обработчики, которые должны быть поставлены в очередь для обратного вызова, а не видеть, и завершите обработку событий, все между строкой src и строкой, содержащей обработчик. (Обратные вызовы не будут происходить между строками, если они были зарегистрированы, они будут ждать в очереди, но если их нет, событие не требуется ждать.)

Ответ 2

Если вы используете jQuery, вы можете использовать его load событие.

Посмотрите пример:

$('img.userIcon').load(function(){
    if($(this).height() > 100) {
        $(this).addClass('bigImg');
    }
});

Ответ 3

У меня была медленная загрузка изображения captcha (1st_image) на моей странице, и я хотел отобразить другое изображение (2nd_image) только ПОСЛЕ ПОКУПКИ изображения captcha (1st_image). Поэтому мне пришлось дождаться загрузки изображения captcha (1st_image).

Вот решение, которое отлично работает, чтобы дождаться загрузки изображения сначала, а затем загрузить другое изображение: (Не забудьте отобразить изображение "please wait!", пока они ждут загрузки другого изображения)

<script>
function checkImageLoad() {
    if (document.getElementById("1st_image").complete == true){console.log("1st_image Loaded!");}
    document.getElementById("2nd_image").src = "http://domain.com/2nd_image.png";
}
</script>
<body onload="checkImageLoad();">
<img id="1st_image" src="http://domain.com/1st_image.png">
<img id="2nd_image" src="http://domain.com/loading_please_wait.gif">

Либо интернет-скорость медленная, либо быстро, браузер будет ждать, пока вся страница загрузится со всеми изображениями (даже если они связаны снаружи), а затем выполните функцию, поэтому второе изображение отображается только после загрузки 1-го изображения хорошо.

Расширенное примечание. Вы можете использовать URL-адрес веб-страницы в "src" изображения, чтобы сначала загрузить веб-страницу, а затем отобразить изображение. Целью является загрузка файла cookie с внешней веб-страницы, которая может повлиять на отображение второго изображения (например, captcha)