Однією з основних причин використання попереднього завантаження зображення є те, що ви хочете використовувати зображення для фонового зображення елемента на події mouseOver або: hover. Якщо ви застосуєте це фонове зображення в CSS лише до стану: hover, це зображення не завантажиться до першої події: hover, і, отже, буде коротка затримка між наведенням миші на цю область та фактичним відображенням зображення .
Техніка No1
Завантажте зображення в звичайний стан елемента, лише змістіть його з положенням фону. Потім перемістіть фонове положення, щоб відобразити його при наведенні.
#grass ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background-position: bottom left; )Техніка No2
Якщо до відповідного елемента вже застосовано фонове зображення, і вам потрібно змінити це зображення, вищезазначене не буде працювати. Зазвичай ви хочете отримати спрайт тут (комбіноване фонове зображення) і просто змістити положення фону. Але якщо це неможливо, спробуйте це. Застосуйте фонове зображення до іншого елемента сторінки, який уже використовується, але не має фонового зображення.
#random-unsuspecting-element ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background: url(images/grass.png.webp) no-repeat; )Ідея створити нові елементи сторінки, які можна використовувати для цієї техніки попереднього завантаження, може з’явитися у вас у голові, наприклад # preload-001, # preload-002, але це скоріше суперечить духу веб-стандартів. Звідси використання елементів сторінки, які вже існують на вашій сторінці.
У мене була ідея спробувати використати той самий елемент, використовувати лише: pseudo-class для завантаження зображення, тому вам не потрібно було покладатися на те, що на вашій сторінці буде достатньо сторонніх зображень без фону, з якими можна працювати, але з якоїсь причини не хотів попередньо завантажувати їх належним чином.
Більше
Ознайомтесь із цією статтею, щоб дізнатись про деякі інші методи, зокрема JavaScript.