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

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

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

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

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

49
image javascript load wait

3 ответов

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

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

94

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

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

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

У меня была медленная загрузка изображения 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://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">

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

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

0