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

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

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

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

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

источник

2010-02-26 Jeenyus

Почему он не работает с свойством 'Image.complete'? –

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

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

источник

2010-02-26 14:18:42

+1 - Это то, что я бы опубликовал. –

Grat! BTW: я довольно не осведомлен о предмете AJAX, но на всякий случай изображение, полученное с AJAX, кэшируется таким же образом, как изображение, написанное до конца в HTML-коде, в конечном итоге может добавить это, чтобы избежать кэширования изображений браузера (очевидно, только если вам это нужно): img.src = "http: //path/to/image.jpg" + "? refresh =" + new Date(). getTime(); –

@Marco Или установите 'cache: false' на XHR :) Хотя я не думаю, что это актуально здесь, потому что вызов AJAX возвращает URL-адрес изображения, а не изображение. Но да, я полагаю, он мог бы использовать случайное значение строки запроса, чтобы убедиться в отсутствии кеширования пользовательского агента. –

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

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

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

источник

2010-02-26 14:16:51 Sagi

-1: не упоминается jQuery в вопросе, поэтому такой ответ может быть довольно запутанным. –

+46

Пожалуйста, не используйте jquery, если не запрошено jquery. –

Также обратите внимание на следующие оговорки с методом загрузки при использовании с изображениями (взято из http: //api.jquery.com/load-event /): > Он не работает последовательно и не надежно кросс-браузер > Он не срабатывает правильно в WebKit, если изображение src установлено на тот же src, что и раньше > Это не правильно закрасить дерево DOM > Может прекратить огонь для изображений, которые уже живут в кеше браузера –

У меня был медленный 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">

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

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

источник

2016-05-01 12:15:13 Tarik

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

ответ

Смежные вопросы