Изменение IMG SRC с помощью JavaScript / JQuery

Question

Я хочу изменить источник изображения и показать изображение «Загрузка ...» во время загрузки целевого изображения. Я делаю следующее:

$('#imageid').attr('src','loading.jpg');
$('#imageid').attr('src',path);

где путь - это путь к целевому изображению. Однако JQuery выполняет оба действия одновременно, и loading.jpg никогда не отображается. То же самое происходит при использовании обычного Javascript.

Как заставить первую строку вступить в силу, чтобы при загрузке следующего изображения отображался loading.jpg?

Answer 1

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

 $('#imageid').attr('src', path).addClass('loading').load(function() { $(this).removeClass('loading'); })

Затем просто добавьте стиль CSS, чтобы поместить изображение загрузки поверх элемента изображения, когда к нему прикреплен класс loading.

 img.loading { 
   background: url("/loading.gif") no-repeat center center transparent;
 }

Это должно обеспечить плавную загрузку вашего изображения. Стоит отметить, что вы также можете сделать это, используя два тега img и поменять местами тот, который виден. Также будьте осторожны с обработчиком load, поскольку кэшированные изображения будут загружаться мгновенно в определенных браузерах. Наслаждайтесь!

Answer 2

Поскольку вы заменяете изображение src одно за другим, оно не видно, возможно, до того, как загружено первое изображение, выполняется следующий запрос источника изображения.Вы можете попытаться установить следующее изображение после того, как первое изображение будет полностью загружено.Это может быть достигнуто путем установки следующего источника изображения в событии image load.Попробуйте это

$('#imageid').load(function(){
   $(this).unbind('load')//We need to unbind the load event because load event will again get called next time when we set the source of this image

   $(this).attr('src',path);
}).attr('src','loading.jpg');