хороший держатель CSS без изображения

Question

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

код моего изображения, как показано ниже

<div id="realimage" style="background-image: real_image.jpg"/>

1. Любой хороший способ поставить в качестве держателя изображения, не помещая пустышку? использование чистого CSS без JavaScript возможно?

Answer 1

Вы можете использовать схему URI данных в качестве источника фиктивного изображения.Он будет загружен с HTML и не потребует дополнительного запроса.

Итак, в вашем CSS вы можете сделать это (вставив красную точку):

.realimage {background: url('data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD/
//+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4U
g9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC')}

Это не поддерживается в IE 6/7, а в IE 8 существует ограничение в 32 КБ дляразмер изображения.

Answer 2

в css3 вы можете добавить несколько фоновых изображений:

.realimage {
  background-image: url(haevy.png), url(dummy.png);
  background-position: center, center;
  background-repeat: no-repeat;
}

Первое изображение - это верхнее изображение

fiddle: http://jsfiddle.net/MbpgL/1/

предупреждение: более старые версии браузеровне всегда нравится CSS3, особенно IE.Но я говорю, что люди, которые не обновляются / не встречаются, не заслуживают хороших сайтов!