На данный момент я нашел два варианта решения этой проблемы: исходный источник всех изображений должен быть базой данных 64 пустое изображение
Эта опция не только требует современного браузера, но она может быть медленнее на стороне клиента, так как браузер должен base-64 декодировать данные изображения, чтобы получить изображение.
Исходный источник всех изображений должен быть URL пустого изображения 1x1
Это нормально, при условии, что пустой URL-адрес изображения для всех слотов изображений является точно таким же URL-адресом и что он имеет длительное время жизни кэша, определенное в заголовке HTTP «cache-control». Проблема заключается в том, что при загрузке новых файлов изображений квадраты изображений переходят к новому размеру, что может сделать работу пользователя не такой замечательной.
Почти идеальная идея заключается в следующем ...
Когда страница запускается, представьте сетку с полями фиксированного размера, которые могут вместить каждое изображение. Это нормально, если вся сетка не помещается на экране. Затем создайте javascript, который выполняется после загрузки HTML, и в этом javascript создайте новый элемент изображения и прикрепите его к каждой ячейке сетки, затем установите источник изображения в правильный файл изображения. Делайте это, пока не заполнится первый экран. затем обнаружите прокрутку в javascript, а затем, когда прокрутка произойдет, повторите описанный выше процесс для новых ячеек.
Теперь, если вы хотите получить лучшее из лучшего, а качество не имеет большого значения, то я рекомендую (я также реализовал это на своем сайте) построить сетку и настроить ее так, чтобы фоновое изображение этой сетки было спрайт-лист всех изображений, отформатированных как квадраты изображений. Этот метод является гибким и быстрым для загрузки, так как для всех изображений требуется один запрос.
Вот шаблон HTML для использования, если вы хотите идти быстрым путем. Только два запроса сделаны. HTML-код и одно изображение. В этом коде я предполагаю, что каждое изображение с листа имеет ширину 100 пикселей и высоту 200 пикселей и что каждое изображение идеально выровнено рядом друг с другом без пропусков.
<html>
<head>
<style type="text/css">
#imagegrid {background-color: black; background-image:url('http://example.com/url/to/imagesheet.jpg');}
A {display:block;width:100px;height:200px;margin:10px;float:left;}
#image1{background-position: 0px 0px}
#image2{background-position: 100px 0px}
#image3{background-position: 200px 0px}
...
#imageN{background-position: XXXpx 0px}
</style>
</head>
<body>
<div id="imagegrid">
<a href="image_one.htm" id="image1"></a>
<a href="image_two.htm" id="image2"></a>
<a href="image_three.htm" id="image3"></a>
...
<a href="image_N.htm" id="imageN"></a>
</div>
</body>
</html>
В своем коде я добавил 3 точки. Это означает, что вы можете продолжать добавлять изображения, увеличивая числа и увеличивая положение на 100 каждый раз, если ваш спрайт-лист содержит только одну строку изображений. Кроме того, в некоторых браузерах, таких как Opera, вам может понадобиться добавить знак минуса перед значениями положения фона, чтобы заставить их работать.