Ожидание загрузки изображения в JavaScript - PullRequest
Новая
       38

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

53 голосов
/ 26 февраля 2010

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

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

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

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

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

Ответы [ 3 ]

101 голосов
/ 26 февраля 2010 
var img = new Image();
img.onload = function() { alert("Height: " + this.height); }
img.src = "http://path/to/image.jpg";

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

11 голосов
/ 26 февраля 2010

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

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

$('img.userIcon').load(function(){
    if($(this).height() > 100) {
        $(this).addClass('bigImg');
    }
});
0 голосов
/ 01 мая 2016

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

Вот решение, которое прекрасно работает, чтобы сначала дождаться загрузки изображения, а затем загрузить другое изображение (не забудьте отобразить изображение «Пожалуйста, подождите!», Пока они ждут загрузки другого изображения): 

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

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

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

...