Фон/изображение заполнителя во время ожидания загрузки полного изображения? ⇐ CSS

[Anonymous]

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

Код: Выделить всё

 --------hr--------
text

Затем через несколько миллисекунд страница перепрыгивает и показывает следующее:

Код: Выделить всё

--------hr--------
[           ]
[   image   ]
[           ]
text

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

Осложняющим фактором является то, что я не знаю заранее высоту и ширину изображений: они адаптивны и просто имеют значение ширины: 100% содержащего их div. Это HTML/CSS:

Код: Выделить всё

[img]myimage.jpeg[/img]
caption

img { width: 100% }

Вот JSFiddle, иллюстрирующий основную проблему: http://jsfiddle.net/X8rTB/3/

Я изучал такие вещи, как LazyLoad, но не могу избавиться от ощущения, что должен быть более простой ответ, не связанный с JS. Или то, что я заранее не знаю высоту изображения, является непреодолимой проблемой? Я знаю соотношение сторон изображений.

Подробнее здесь: https://stackoverflow.com/questions/147 ... ge-to-load