Коли займаєшся версткою і створенням будь-яких хитрощів з картинками (зазвичай з підміною при наведенні або навіть їх анімацією), завжди вспиливает такий нюанс як загальмована подгрузка картинки / зображення. На перший погляд проблема не така вже серйозна і, як тільки картинки завантажаться, все працює відмінно, але ось цей перший hover ефект, який намагається завантажити картинку і одночасно замінити її, створює такий ефект ривка, який нерідко виглядає не дуже красиво і може зіпсувати перше враження користувачів вашого сайту.
З анімацією справи йдуть ще гірше. Уявіть, наприклад, що вам потрібно реалізувати на JS (JQuery) проезжаюшую легкову машину, заменяюшуюся через 2 секунди автобусом. Зображення з машиною і автобусом різні. При цьому вони почнуть довантажуватися тільки в той момент, коли браузер отримає на них посилання з можливістю підвантаження (тобто на початку анімації). На завантаження такої картинки потрібно буде кілька секунд. Тобто виходить, що половину двухсекундной анімації це зображення тільки буде довантажувати - це не порядок.
Але це все можна виправити предзагрузкі (попередньої завантаженням) зображень, яка дозволяє довантажувати картинку в буфер одразу при завантаженні основної сторінки (або навіть перед цим). Про це я і хочу розповісти в цій статті.
Складно звучить? =) А виглядає всього лише ось таким кодом, де потрібно замінити шлях до картинки на свій і все буде працювати:
Якщо ж вам потрібно довантажити кілька зображень, то ви просто можете перерахувати їх через кому, ось так:
Картинок може бути будь-яка кількість. Головне не забувайте про JQuery функцію, без неї предзагрузкі працювати не буде.
У цього способу є і недоліки, наприклад в тому, що він залежить від того, чи включений JS в браузері користувача. Але з особистого досвіду скажу, що якщо рівнятися на тих, у кого вимкнений JS, то в сучасних технологіях сайтобудування дуже багато не вдасться реалізувати. Та й таких користувачів, я думаю, не так вже й багато. Взагалі потрібно рівнятися на більшість, а більшість не Кастомізіруйте браузер до такої міри.
Я особисто в багатьох проектах вважаю за краще використовувати саме такий спосіб подгрузки з огляду на те, що він зручний в реалізації.
Предзагрузкі зображень за допомогою нових возможнестей HTML5
Цей спосіб з'явився відносно недавно з огляду на те, що сама технологія HTML5 була запущена не так давно. Суть його в тому, що ви проставляєте посилання на картинку через тег link, а в атрибуті rel (тип довантажувати елемента) ви прописуєте, що це предзагрузкі. Тим самим браузер бачить цей тег і автоматично завантажує в буфер картинку.
Робиться це додаванням в html код ось такого тега (тільки посилання на зображення міняєте на свою):
Тут в rel прописано 2 параметра: prerender - для його величності Chrome і prefetch - для інших браузерів. Якщо ви хочете довантажувати більшу кількість картинок, то копіюєте тег і замінюєте посилання потрібну кількість разів:
Плюс цього способу в тому, що відключення JS ніяк не вплине на предзагрузкі, але особисто я бачу 2 явних недоліки:
1) Технологія HTML5, а значить і цей спосіб предзагрузкі, підтримується далеко не всіма браузерами. Зараз, правда, браузери оновлюються і більшість сучасних розвиваються браузерів розпізнають HTML5, але всерівно це ще далеко від ідеалу.
2) Більш грамоздкіе в відрізняє від JS реалізації, адже доведеться кожне зображення описувати окремим тегом (причому з різними параметрами rel, що б добитися чогось близького до кросбраузерності).
Загалом вважаю, що цей спосіб перспективний, але йому потрібен час. Зараз в ньому не вистачає універсальності.
Попереднє завантаження картинок на перевіреному часом HTML
Найперша ідея, яка приходить зазвичай у голову на чистому html - це створити div блок з параметром CSS "display: none;". в ньому картинку і це повинно стати предзагрузкі. Насправді це не працює, браузер почне завантаження в буфер тільки тоді, коли display стане відмінне від none.
Але я придумав спосіб з використанням хитрощів CSS. Розповім докладніше про нього.
Розміщення в невидимому блоці через CSS opacity і position (позиціонування)
В CSS є така властивість - opacity. Його призначення - змінювати прозорість і змінити прозорість можна аж до нуля. Крім того, в CSS є ще й властивість position, яке потрібно для позиціонування елемента на сторінці (можна попиксельно зрушувати блок з інформацією хоч куди в межах і за межі видимості сторінки). Все це нам і стане в нагоді:
Тим самим ми отримуємо невидимий блок c картинкою, який ще й фактично розташований за межами видимої користувачеві інформації. Таким видом позиціонування за межами екрану, до речі, часто користуються, якщо хочуть створити якийсь невидимий блок, частенько бачив як вшивають посилання на безкоштовні шаблони саме таким чином. Так що ви тобі все знаєте =)
Якщо ви хочете зробити прелоада декількох картинок таким способом, то досить їх вказати всередині div блоку, ось так:
Мені б дуже хотілося знати, як Вас звати і як зв'язатися з Вами. Заповнення цієї інформації не займе у Вас багато часу, а я буду вдячний за це!
Сайт (не обов'язково):
Мій блог автоматично запам'ятає Ваші нік / пошту в межах поточного браузера. При бажанні їх завжди можна буде скинути.
Підписуйтесь на мій блог
Хочете першими дізнаватися про найцікавіше? Тоді підпишіться на розсилку новин.
Підписавшись на розсилку, Ви завжди будете в першу чергу дізнаватися про найважливішою і корисною для блогерів і веб-майстрів інформації.
Або стежте за новинами
Створити сайт самому і заробляти в інтернеті цілком реально. І мій блог допоможе вам в цьому.