Предзагрузка Картинок - Предварительная Загрузка Изображений на 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 поддерживается более чем 88% браузеров.
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Статьи из данной категории:
Комментарии
- Комментариев пока нет.