У меня есть несколько изображений на моей странице. Я обнаружил, что страница начинает визуализироваться до загрузки изображений (что хорошо), но визуальный эффект невелик. Первоначально пользователь видит это:
--------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-ответ. Или факт, что я заранее не знаю высоту изображения непреодолимой проблемы? Я знаю соотношение сторон изображений.
Вместо того, чтобы напрямую ссылаться на изображение, вставьте его в 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');
}
Есть очень простая вещь, чтобы проверить, прежде чем вы начнете смотреть на ленивую загрузку и другие JS. Убедитесь, что загруженные изображения JPG сохранены с включенной опцией "progressive"! Это заставит их загружать изображение итеративно, начиная с замещающего, который имеет низкое разрешение и быстрее загружается, а не ждет самых высоких данных res перед рендерингом.
Имейте в виду - ответы выше, которые рекомендуют использовать фоновый подход 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>
Конечно, основным недостатком этого подхода является то, что вам нужно заранее знать пропорции изображения.
Единственное, что я могу придумать, чтобы свести к минимуму эффект перехода на ваш текст, - это установить min-height туда, где будет отображаться изображение, я бы сказал, - установите его на "более короткое" изображение, о котором вы знаете. Таким образом, скачок будет менее очевидным, и вам не нужно будет использовать lazyLoad или так... Однако это не полностью устраняет вашу проблему.
Здесь один наивный способ сделать это,
img {box-shadow: 0 0 10px 0 rgba (# 000, 0.1); } }
Вы можете манипулировать значениями, но то, что он делает, это создать очень легкую рамку вокруг изображения, которое не подталкивает содержимое. Изображения могут загружаться в любое время, когда они хотят, и вы получаете хороший пользовательский интерфейс.
Надеюсь, что это поможет
Это очень просто.. Этот сценарий позволяет загружать фотографию профиля, которая по умолчанию создает образ места. Вы можете загрузить фоновое изображение multi css в элемент. Когда аватарное изображение выходит из строя, изображение-заполнитель появляется по умолчанию для div.
Если вы используете элемент div, который загружается через css background-image, вы можете использовать этот стиль:
#avatarImage {
background-image: url("place-holder-image.png"), url("avatar-image.png");
}<div id="avatarImage"></div> #avatarImage {
background-image: url("place-holder-image.png"), url("avatar-image.png");
}
<div id="avatarImage"></div>