IntersectionObserver使用data-srcset和imagekit.io创建一个延迟加载图像

我正在使用IntersectionObserver.js与data-srcset创建一个延迟加载，但图像不能按照分辨率正确显示，每次浏览器选择最大的图像…在本例中，它是宽度为450的图像，忽略其他宽度(100px, 200px, 300px, 400px)。

下面是用于惰性加载的JS代码:

const images = document.querySelectorAll('img[data-src]');
const config = {
rootMargin: '50px 0px',
threshold: 0.01
};
let observer;
if ('IntersectionObserver' in window) {
observer = new IntersectionObserver(onChange, config);
images.forEach(img => observer.observe(img));
} else {
console.log('%cIntersection Observers not supported', 'color: red');
images.forEach(image => loadImage(image));
}
const loadImage = image => {
image.classList.add('fade-in');
image.src = image.dataset.src;
image.srcset = image.dataset.srcset;
}
function onChange(changes, observer) {
changes.forEach(change => {
if (change.intersectionRatio > 0) {
// Stop watching and load the image
loadImage(change.target);
observer.unobserve(change.target);
}

});
}

下面是使用的HTML代码(这是一个文章分类页面):

<img class="img-fluid"
src="data:image/webp;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="https://ik.imagekit.io/amalgama/usuarios/administradores/admin/artigos/thumb/7-passos-para-sair-das-dividas-e-se-tornar-um-empreendedor.webp?tr=w-100"
alt="bla bla bla"
title="bla bla bla"
data-srcset="https://ik.imagekit.io/amalgama/usuarios/administradores/admin/artigos/thumb/7-passos-para-sair-das-dividas-e-se-tornar-um-empreendedor.webp?tr=w-100 100w,
https://ik.imagekit.io/amalgama/usuarios/administradores/admin/artigos/thumb/7-passos-para-sair-das-dividas-e-se-tornar-um-empreendedor.webp?tr=w-200 200w,
https://ik.imagekit.io/amalgama/usuarios/administradores/admin/artigos/thumb/7-passos-para-sair-das-dividas-e-se-tornar-um-empreendedor.webp?tr=w-300 300w,
https://ik.imagekit.io/amalgama/usuarios/administradores/admin/artigos/thumb/7-passos-para-sair-das-dividas-e-se-tornar-um-empreendedor.webp?tr=w-400 400w,
https://ik.imagekit.io/amalgama/usuarios/administradores/admin/artigos/thumb/7-passos-para-sair-das-dividas-e-se-tornar-um-empreendedor.webp?tr=w-450 450w"
width="450px"
height="278px">

你可以看到演示页面运行在下面的URL:

演示链接

嗯，你知道为什么其他尺寸不显示吗?每个屏幕上只有最大的图像;(

我认为你的延迟加载可能会产生这些问题。如果你检查图像请求的来源，你会发现它来自universal.js中的loadImage函数，它直接设置了图像的src属性。也许你可以尝试本地浏览器的延迟加载，跳过交叉点观察者的诡计:https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading

我之前忘记发布解决方案了，但是在这里，经过多次测试，我终于找到了一种使用data-srcset, lazyload, imagekit和声明高度和宽度来优化谷歌页面洞察力的方法。它适用于桌面和移动设备，所有类型的设备像素比例……希望它能帮助到一些人:)

媒体大小需要是两倍(不要问我为什么lol)

演示制作链接。

代码

<script src="https://cdn.jsdelivr.net/npm/intersection-observer@0.12.2/intersection-observer.min.js"></script>

Javascript:

const config = {
rootMargin: '50px 0px',
threshold: 0.01
};
if ('IntersectionObserver' in window) {
LazyLoad();
} else {
ShowAllImages();
}
function LazyLoad(){
let observer;
let images = document.querySelectorAll('img[data-src]');
observer = new IntersectionObserver(onChange, config);
images.forEach(img => observer.observe(img));
}
function ShowAllImages() {
images.forEach(image => loadImage(image));
}
const loadImage = image => {
image.classList.add('fade-in');
image.src = image.dataset.src;
image.srcset = image.dataset.srcset;
}
function onChange(changes, observer) {
changes.forEach(change => {
if (change.intersectionRatio > 0) {
// Stop watching and load the image
loadImage(change.target);
observer.unobserve(change.target);
}

});
}

HTML:

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<figure>
<img 
width="950" height="950"
src="data:image/webp;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://placehold.it/950x950" 
sizes="(max-width: 125px), 
(max-width: 150px), 
(max-width: 175px), 
(max-width: 200px), 
(max-width: 225px), 
(max-width: 250px), 
(max-width: 275px), 
(max-width: 300px), 
(max-width: 325px), 
(max-width: 350px), 
(max-width: 375px), 
(max-width: 400px), 
(max-width: 425px), 
(max-width: 450px), 
(max-width: 475px), 
(-webkit-min-device-pixel-ratio: 1.1) AND (-webkit-max-device-pixel-ratio: 1.5) 80.5vw, 
(-webkit-min-device-pixel-ratio: 1.6) AND (-webkit-max-device-pixel-ratio: 2) 57.5vw, 
(-webkit-min-device-pixel-ratio: 2.1) AND (-webkit-max-device-pixel-ratio: 2.5) 42.5vw, 
(-webkit-min-device-pixel-ratio: 2.6) AND (-webkit-max-device-pixel-ratio: 3) 39.5vw, 
(-webkit-min-device-pixel-ratio: 3.1) AND (-webkit-max-device-pixel-ratio: 3.5) 32.5vw, 
(-webkit-min-device-pixel-ratio: 3.6) AND (-webkit-max-device-pixel-ratio: 4) 28.5vw" 
data-srcset="http://placehold.it/250x250 250w, 
http://placehold.it/300x300 300w, 
http://placehold.it/350x350 350w, 
http://placehold.it/400x400 400w, 
http://placehold.it/450x450 450w, 
http://placehold.it/500x500 500w, 
http://placehold.it/550x550 550w, 
http://placehold.it/600x600 600w, 
http://placehold.it/650x650 650w, 
http://placehold.it/700x700 700w, 
http://placehold.it/750x750 750w, 
http://placehold.it/800x800 800w, 
http://placehold.it/850x850 850w, 
http://placehold.it/900x900 900w, 
http://placehold.it/950x950 950w" 
>
</figure>

相关内容

最新更新

热门标签：