Индикатор загрузки изображения на jQuery

в 19:36, , рубрики: javascript, jquery, php, индикатор загрузки, метки: , ,

В данном посте я хотел бы рассказать как сделать простой индикатор загрузки изображения используя библиотеку jQuery.

Чтобы сделать индикатор загрузки изображения понадобится 3 метода:
1. load — в случае успешной загрузки
2. error — в случае ошибки
3. attr — для смены src изображения.

Итак, допустим мы имеем конструкцию

<div>
  <div style="top:50%; left:50%;position:absolute;" id="loader"><img src="/loader.gif" /></div>
  <img id="testImage" src="/test.jpg" onclick="changeImageTo('/test2.jpg');" />
</div>

Функция changeImageTo:

function changeImageTo( NewSrc )
{
   $('#loader').show();
	
  $('#testImage').load(function () {
    $('.loader').hide();
  }).error(function () {
    $('.loader').hide();
  }).attr('src', NewSrc );
}

Вот как-то так.
Прошу строго не судить.

Автор: Sect0R


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js