Как сделать preloader для картинки?

Question

[nen0y]

Есть несколько картинок в ряд, которые загружаются с интернета

<div class="slide"><a href="#"><img src="https://пикча_1"></a></div>

<div class="slide"><a href="#"><img src="https://пикча_2"></a></div>

<div class="slide"><a href="#"><img src="https://пикча_3"></a></div>

Если интернет медленный нужно сначала показать preloader, а когда изображение загрузится, то показать саму картинку.

Как это сделать?

Answer 1

[Евгений Калибров]

Простой способ. Если заранее известны размеры картинок, то пропишите их в атрибутах width и height у картинки, что бы даже когда картинка ещё не загрузилась она уже занимала необходимое для её отображения место. А для элемента добавьте css свойство добавляющее анимированную картинку бэкграунда (gif, а лучше svg) по центру.

Comments

[Евгений Калибров]

nen0y Вам помог мой совет?

Answer 2

[Archakov Dennis]

1. Ставите какой-нибудь прелоадер в src. Типа сплошной серый фон (не картинка, а CSS'ом например).
2. В img, задаете еще один атрибут data-src в нем храните оригинальное изображение. Оно не будет подгружаться.
2. Через jQuery или window.onload проверяете, что страница загрузилась.
3. Если все загрузилось, то вытаскиваем из data-src оригинал и вставляем в src

Если используется прелоадер CSS (то есть просто сплошной цвет), то для img ставьте класс preload или любой другой, который означает, что картинка еще не загрузилась. Когда страница загрузится, убираете у всех картинок класс и ставите им оригинальное изображение.

Примерно так, я делал в своем блое - https://archakov.im/ . Там изображения с размытым эффектом.