У цей момент я знайшов два варіанти вирішення цієї проблеми: Початковий src всіх зображень повинен бути базою даних 64 пустим зображенням
Цей параметр вимагає не тільки сучасного веб-переглядача, але й може бути повільнішим на клієнтській стороні, оскільки для створення зображення браузер повинен базувати-64 декодувати дані зображення.
Початковий src всіх зображень має бути URL-адресою порожнього 1x1 зображення
Це нормально за умови, що порожня URL-адреса зображення для всіх слотів зображення є точно такою ж URL-адресою і що він має довгий термін служби кешу, визначений у заголовку HTTP "кеш-контроль". Проблема в цьому полягає в тому, що, коли завантажуються нові файли зображень, квадрати зображень підскочать до нового розміру, що може зробити досвід користувача не таким чудовим.
Майже ідеальна ідея така ...
Коли сторінка запускається, пред'явіть сітку з фіксованими розмірами полями, які вміщують кожне зображення. Це нормально, якщо вся сітка не вміщується на екрані. Потім створіть 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, можливо, вам потрібно буде додати негативний знак перед значеннями фонового положення, щоб змусити їх працювати.