Предзагрузка Картинок - Предварительная Загрузка Изображений на JavaScript

Рассмотрим, как реализовать предзагрузку изображений на нативном JavaScript, jQuery, а так же при помощи rel="preload". Это может понадобиться, например, если картинки добавляются на страницу (в DOM) динамически. Чтобы страница не прыгала, и выглядело всё достойно, необходимо чтобы изображения были предварительно загружены.

На JavaScript это будет выглядеть следующим образом.

document.addEventListener('DOMContentLoaded', () => {
    const images = new Array();

    function preloadImages(...images) {
        images.forEach((image, i) => {
            image = new Image();
            image.src = preloadImages.arguments[i];
        });
    };

    // Предварительная загрузка нужных картинок

    preloadImages(
        '{Изображение}.png',
        '{Другое изображение}.jpg'
    );
});

Предварительная загрузка картинок на jQuery

С использованием jQuery предзагрузка изображений будет следующей.

jQuery(($) => {
    const preloadImages = () => {
        for (let img = 0; img < arguments.length; img++) {
            $('<img>').attr('src', arguments[img]);
        };
    };

    // Предзагрузка необходимых изображений

    preloadImages(
        '{Изображение 1}.png',
        '{Изображение 2}.jpg'
    );
});

Предварительная загрузка с помощью rel="preload"

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

<link rel="preload" href="{Картинка 1}.jpg" as="image" />
<link rel="preload" href="{Картинка 2}.png" as="image" />

На момент написания статьи, rel="preload" тега link не поддерживается Firefox.

admin
09/05/2020 19:18