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