Заполнитель фона/изображение при ожидании загрузки полного изображения?

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

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

Затем через несколько миллисекунд страница перескакивает, чтобы показать это:

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

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

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

<div class="thumbnail">
<img src="myimage.jpeg" />
<div class="caption">caption</div>
</div>
img { width: 100% }

Здесь JSFiddle иллюстрирует основную проблему: http://jsfiddle.net/X8rTB/3/

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

ОТВЕТЫ

Ответ 1

Вместо того, чтобы напрямую ссылаться на изображение, вставьте его в DIV, как показано ниже:

<div class="placeholder">
    <div class="myimage" style="background-image: url({somedynamicimageurl})"><img /></div>
</div>

Затем в вашем CSS:

.placeholder {
    width: 300;
    height: 300;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('my_placeholder.png');
}

Ответ 2

Есть очень простая вещь, чтобы проверить, прежде чем вы начнете смотреть на ленивую загрузку и другие JS. Убедитесь, что загруженные изображения JPG сохранены с включенной опцией "progressive"! Это заставит их загружать изображение итеративно, начиная с замещающего, который имеет низкое разрешение и быстрее загружается, а не ждет самых высоких данных res перед рендерингом.

Ответ 3

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

Решение этой проблемы (хотя и не использующее фоновый подход div) состоит в том, чтобы иметь обертку div для вашего изображения и добавлять к ней верхнюю часть на основе соотношения сторон изображения, которое вам нужно знать заранее. Ниже код будет работать для изображения с соотношением сторон 2: 1 (высота составляет 50% от ширины)

<div style="width:100%;height:0; padding-top:50%;position:relative;">
  <img  src="<imgUrl>" style="position:absolute; top:0; left:0; width:100%;">
</div>

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

Ответ 4

Единственное, что я могу придумать, чтобы свести к минимуму эффект перехода на ваш текст, - это установить min-height туда, где будет отображаться изображение, я бы сказал, - установите его на "более короткое" изображение, о котором вы знаете. Таким образом, скачок будет менее очевидным, и вам не нужно будет использовать lazyLoad или так... Однако это не полностью устраняет вашу проблему.

Ответ 5

Здесь один наивный способ сделать это,

img {box-shadow: 0 0 10px 0 rgba (# 000, 0.1); } }

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

Надеюсь, что это поможет

Ответ 6

Это очень просто.. Этот сценарий позволяет загружать фотографию профиля, которая по умолчанию создает образ места. Вы можете загрузить фоновое изображение multi css в элемент. Когда аватарное изображение выходит из строя, изображение-заполнитель появляется по умолчанию для div.

Если вы используете элемент div, который загружается через css background-image, вы можете использовать этот стиль:

#avatarImage {
    background-image: url("place-holder-image.png"), url("avatar-image.png");
}
<div id="avatarImage"></div>

Ответ 7

    #avatarImage {
        background-image: url("place-holder-image.png"), url("avatar-image.png");
    }

    <div id="avatarImage"></div>