Фон/изображение заполнителя, ожидая полного образа, чтобы загрузить?

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

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

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

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

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

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

<div class="thumbnail">

<div class="caption">caption</div>
</div>
img { width: 100% } 

Here's a JSFiddle to illustrate the basic problem: http://jsfiddle.net/X8rTB/3/

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

20
Попробованный, что следующим образом, но это doesn' t на самом деле, кажется, делаю что-либо: ul.options литий {фон: URL (/ media/ img/ cont/ filler.png); второстепенный размер: 100% 100%;}
добавлено автор Richard, источник
Сделайте пустое отделение с серым фоном и установите размеры, затем добавьте изображение фоновое изображение ?
добавлено автор Andy, источник
Ричард, don' t используют пункт списка, используют отделение вместо , и затем дают ему размеры набора ( высота: 200 пкс; width:300px; ), и это должно работать
добавлено автор Andy, источник
Вы can' t знают ширину и высоту изображения, пока вы не загрузили изображение. It' s невозможное шоу заполнитель с точными размерами, которые неизвестны. Если вы знаете форматное соотношение заранее тогда it' s возможный вычисление высоты.
добавлено автор Jari Pekkala, источник

6 ответы

Вместо того, чтобы сослаться на изображение непосредственно, засуньте его в ОТДЕЛЕНИИ, как следующее:

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

Тогда в вашем CSS:

.placeholder {
    width: 300;
    height: 300;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('my_placeholder.png');
}
14
добавлено
Это полагается на изображение незаполнителя, не являющееся прозрачным, doesn' t это?
добавлено автор Medinoc, источник

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

3
добавлено

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

1
добавлено

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

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

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

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

1
добавлено

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

При использовании элемент отделения, который загружает через CSS фоновое изображение, вы могли использовать этот стиль:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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

enter image description here

0
добавлено

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

img { тень коробки: 0 0 10 пкс 0 rgba (#000, 0.1); }

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

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

0
добавлено
Хорошая идея, но на практике это не работает. Можно проверить его с изображением, загруженным от src ="placehold.it/150x150"; так как они имеют тенденцию загружать вполне медленно (бесплатное обслуживание, that' s, почему). Так как у DOM еще нет объекта ни с каким размером назначенным, тень коробки просто отдает как маленькая точка (так как еще нет ничего к ' shadow')
добавлено автор rmcsharry, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)