Показывать loader'ы пока на странице прогружаются картинки?

Question

[Erik2121]

Добрый день!
Всё никак не получается разобраться..
Смотрите вот у к примеру на странице сайта есть 7-9 картинок(в публикации) и загрузка идёт некоторых картинок медленно, как вместо прогрузки показать лоадер?
Пробовал laod, onload и т.п не получается..
Пожалуйста подскажите в каком направлении копать..

Comments

[Сергей delphinpro]

laod и не будет работать =)

<div class=image>
  <img src=''>
</div>

.image { background: url('loader.gif') center; }
.image img { opacity: 0; transition: opacity 0.3s ease; }
.image img.is-loaded { opacity: 1; }

$(function(){
  $('img').on('load', function(){
    $(this).addClass('is-loaded');
  });
});

[Erik2121]

Сергей: Спасибо вроде работает!
Но есть один нюанс загружаются только на одной странице, если перехожу на другую там вообще картинок нет, но если обновить страницу т.е буду загружаться плавно, не подскажите почему так?

[Павел]

Erik2121: значит, у вас SPA, а следовательно, нужно смотреть функции не document.ready для запуска скрипта, а какие-то конкретные под вашу среду, грубо говоря: onRouteFired

[Erik2121]

Павел: что такое SPA?

[Ivanq]

Erik2121: Гугл в помощь. SPA = Single Page Application. Павел имел в виду, что содержимое обновляется без перезагрузки страницы.

Answer 1

[Дмитрий]

Попробуйте плагин https://github.com/luis-almeida/unveil Подгружает картинки когда пользователь пролистает к ним