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

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

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

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

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