Переведено с: Создание предварительного загрузчика изображений CSS
Китайский: предварительная загрузка изображений на чистом CSS
Существует много способов реализовать предварительную загрузку изображений, обычно с использованием Javascript для обеспечения прокрутки. Больше не ограничивайтесь предварительной загрузкой Javascript, используйте CSS, и вы сможете без проблем предварительно загружать изображения.
Зачем использовать предварительную загрузку
Почему вы рассматриваете возможность использования предварительной загрузки? Был ли у вас когда-нибудь веб-сайт, на котором вам приходилось прокручивать навигацию, а затем происходила задержка загрузки изображений… хе-хе-хе. Предварительная загрузка поможет вам в этом отношении. Он будет загружать эти изображения при загрузке страницы и сохранять их в кеше браузера. Таким образом, когда пользователь прокручивает навигацию, она будет красивой и плавной, без каких-либо задержек.
CSS-код
Идея состоит в том, чтобы написать стиль CSS, чтобы установить несколько фоновых изображений, а затем скрыть их, чтобы вы не могли их видеть. Именно эти фоновые изображения вы хотите предварительно загрузить.
Вот пример:
#preloader {
/* Изображения, которые вы хотите предварительно загрузить*/
фоновое изображение: URL(image1.jpg);
фоновое изображение: URL(image2.jpg);
фоновое изображение: URL(image3.jpg);
ширина: 0 пикселей;
высота: 0 пикселей;
дисплей: встроенный;
}
Это просто способ скрыть ваши изображения, чтобы они не отображались. Я также видел, как люди использовали очень большие значения фоновой позиции для выталкивания изображений. Или задайте отрицательное значение маржи. Есть много способов скрыть изображения, которые вы хотите предварительно загрузить, выберите тот, который подходит вам лучше всего.
другая ситуация
Нечасто случается, что вам нужно загрузить огромное изображение, если вы следуете обычному подходу, предоставляя некую индикацию того, что изображение загружается. Вот немного CSS, чтобы дать пользователю подсказку о том, что изображение загружается.
img {background: url(loadingHourGlass.gif) без повтора 50% 50% };
Изображения GIF можно анимировать, подобно пляжным мячам на Mac или песочным часам на ПК. Используйте анимацию, чтобы пользователь знал, что что-то происходит.
в заключение
Делайте все возможное, когда предварительная загрузка имеет смысл, и ваши пользователи будут любить вас за это. На самом деле они могут не заметить, но это хорошо: если они заметят, что ваш сайт загружается, возможно, он слишком медленный.
Посмотреть демо
Особые примечания к примеру 1
Прежде всего, спасибо за вопросы, поднятые пользователями сети в комментариях. После перевода этой статьи, учитывая, что один и тот же атрибут определяется в правиле CSS несколько раз, браузеры обычно обрабатывают только последний из них, я решил, что это необходимо. сделать тест, но я не понял, что происходит. Ввиду серьезности вопроса им не занялись вовремя, что может вызвать некоторые недоразумения.
Согласно моим тестам, большинство браузеров загружают только последнее изображение, а первые два изображения игнорируются . Но в браузерах с ядром WebKit, таких как Chrome, эти три изображения будут предварительно загружены. Пример 1 дает нам хорошую идею для решения проблемы , но для использования загрузки нескольких изображений в одном стиле CSS нам, возможно, придется подождать, пока несколько атрибутов фонового изображения CSS3 не будут поддерживаться большим количеством браузеров.
PS: Позвольте мне объяснить эту демонстрацию. Возможно, первоначальный автор не слишком много думал и просто хотел продемонстрировать эффект предварительной загрузки, поэтому эта демонстрационная страница была немного простой: он просто использовал предварительно загруженное изображение в качестве фона при наведении курсора мыши, чтобы при наведении мыши на него Это, Может без мерцания реальности этой картины. Ну, это второе употребление в статье...