В современном быстро меняющемся онлайн-мире оптимизация производительности веб-сайта имеет решающее значение. Одним из эффективных методов улучшения пользовательского опыта и сокращения времени загрузки является предварительная загрузка изображений. Предварительная загрузка позволяет загружать и кэшировать изображения заранее, чтобы они были легко доступны при необходимости. В этой статье мы рассмотрим различные методы предварительной загрузки изображений на примерах кода, которые помогут вам улучшить производительность вашего сайта.
<head>
<link rel="preload" href="image1.jpg" as="image">
<link rel="preload" href="image2.jpg" as="image">
</head>Метод 2: объекты изображений JavaScript
Используя JavaScript, вы можете создавать объекты изображений и назначать URL-адреса изображений их атрибуту src. При этом подходе изображения предварительно загружаются программно. Вот пример:
const imageUrls = ['image1.jpg', 'image2.jpg'];
imageUrls.forEach(url => {
const img = new Image();
img.src = url;
});Метод 3: фоновые изображения CSS
Если в CSS в качестве фоновых изображений указаны изображения, вы можете использовать функцию url()в сочетании со свойством content. чтобы предварительно загрузить их. Вот пример:
url(‘image1.jpg’) url(‘image2.jpg’);
отображение: нет;
Метод 4: API Intersection Observer
API Intersection Observer позволяет асинхронно загружать изображения, когда они попадают в область просмотра. Установив порог, вы можете предварительно загружать изображения непосредственно перед тем, как они станут видимыми пользователю. Вот пример:
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
const images = document.querySelectorAll('img[data-src]');
images.forEach(img => observer.observe(img));