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

Question

Мне очень нравится эффект, представленный здесь:

http://rascals.eu/templates/rt0802/portfolios/portfolio-2-columns/

Проблема, однако, в том, что если вы посмотрите на исходный код, то заметите, что его нет - все это делается с помощью jquery и ссылок, созданных так:

<a href="xxx.jpg" rel="lightbox[portfolio]" style="width: 446px; height: 205px" class="autoload hover" data-image_url="yyy.jpg"></a>                                                                                               

с изображением, вероятно, созданным в фоновом режиме и затем вставленным в это место при загрузке.

Однако возможно ли это другим способом, более совместимым со стандартами? Кто-нибудь может направить меня к любым ресурсам / учебникам, если так?

Спасибо.

Редактировать: Под стандартами я имею в виду:

С помощью img src, указывающей на правильное местоположение, чтобы изображения все еще отображались, когда js отключен.

Answer 1

Вы могли бы сделать

img {
  display: block;
  background-image: url(...);
  background-position: center center;
}

Если фоновое изображение, которое вы используете, кэшируется, оно должно появиться раньше, чем изображения. (Остерегайтесь прозрачных изображений, поскольку за ними будет фон).

Answer 2

В большинстве случаев поможет путь Ариэль. Однако при первой загрузке веб-сайта вы не сможете увидеть загрузочное изображение, поскольку некоторые браузеры загружают фоны после начала загрузки изображений (тег img). В следующий раз изображение будет кэшировано, и страница будет хорошо выглядеть. И, как уже упоминалось, этот способ хорош для изображений, которые не являются прозрачными. Я обычно использую эту фоновую технику с загрузкой изображения самостоятельно:)