Простой способ предзагрузки изображений с jQuery

Быстрый ответ

Чтобы загрузить изображения предварительно, можно использовать цикл $.each(), который применим к массиву с URL-адресами изображений. В ходе итерации создавайте экземпляры new Image() и присваивайте им атрибут src. Браузер сразу же начнёт кешировать эти изображения:

['img1.jpg', 'img2.png'].forEach(src => { $('<img>').attr('src', src).appendTo('body').hide(); });

Этот метод не только обеспечивает предзагрузку, но и гарантирует мгновенную доступность изображений при необходимости.

Контроль всего процесса: использование событий onload и onerror

Если у вас большое количество изображений, вас может заинтересовать использование обработчиков событий onload и onerror. Они позволяют контролировать процесс загрузки и своевременно отреагировать на возможные ошибки:

function preloadImages(sources, callback) {
    let counter = 0;

    sources.forEach(src => {
        let img = new Image();

        img.onload = () => {
            counter++;
            if(counter === sources.length) {
                callback();
            }
        };

        img.onerror = () => {
            console.error(`Ошибка загрузки изображения: ${src}`);
        };

        img.src = src;
    });
}

Тщательная обработка ожидаемых проблем с загрузкой поможет избежать рисков для пользовательского интерфейса.

Сжатый формат

Если вы столкнулись с необходимостью быстрого прототипирования или работаете с небольшим количеством изображений, попробуйте простой и быстрый способ: $(new Image()).src = 'image-url.jpg';.

Относительность восприятия скорости

Скорость работы сайта влияет на впечатление пользователя от его использования. Оптимальная стратегия включает запуск предварительной загрузки после загрузки основного контента или в моменты пользователями бездействия, используя для этого Ajax-колбеки. Такой подход избавит от неожиданных проволочек и придаст странице профессиональный вид.

Всё самое важное без избыточника

Перед тем, как использовать jQuery-плагины, подумайте, действительно ли вам нужны все их функции и зависимости. Во многих случаях достаточно работы с основным JavaScript и простым синтаксисом jQuery.

Визуализация

Представьте предварительную загрузку изображений как подготовку всех необходимых для приготовления блюда компонент.

$('<img/>')[0].src = '🍲'; // Собираем ингредиенты
$('<img/>')[0].src = '🍹'; // Готовим специи
$('<img/>')[0].src = '🍰'; // Не забываем о секретном ингредиенте!

В результате вы получите полностью готовую веб-страницу, все элементы которой находятся на своих местах и готовы к отображению без задержек.

Прогресс загрузки: Следите за процессом

Если ситуация требует загрузки большого количества визуальных элементов, или вы работаете над приложением с прогрессивным веб-интерфейсом (PWA), можно воспользоваться индикаторами прогресса. Они позволяют пользователю видеть, что происходит в фоновом режиме:

// 'progress-update' – функция для обновления пользовательского интерфейса
sources.forEach(src => {
    let img = new Image();

    img.onload = () => {
        counter++;
        progressUpdate(counter, sources.length);
    };

    img.src = src;
});

Обеспечьте готовность к ошибкам

Ошибки – это неотъемлемый элемент работы любого приложения. Несмотря на это, важно быть готовым к возможным проблемам, таким как неправильные пути к файлам или сбои в сети:

img.onerror = () => { 
    handleImageLoadError(src);
};

Загружать только нужное: Условная загрузка

Эффективная загрузка предусматривает загрузку только того контента, который пользователь видит, или того, который вскоре должен стать видимым. Для этих целей могут быть полезны медиа-запросы или плагин jQuery .in-viewport:

if($('#myImage').is(':in-viewport')) {
    preloadImages(['img-visible-on-viewport.jpg']);
}

Полезные материалы

1. .load() | Документация API jQuery
2. HTMLImageElement: Конструктор Image() – Веб-API | MDN
3. javascript – Предварительная загрузка изображений с помощью jQuery – Stack Overflow
4. $( document ).ready() | Учебный центр jQuery
5. Preload: Для чего это нужно? — Smashing Magazine