可以使用Intersection Observer API来监测图片何时进入页面视图,然后在图片加载完成后获取其宽高并将其应用到元素上,从而解决累计布局偏移问题。
代码示例:
function observeImage(image) {
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const loadedImage = new Image();
loadedImage.onload = () => {
const { naturalWidth, naturalHeight } = loadedImage;
if (naturalWidth && naturalHeight) {
image.style.width = `${naturalWidth}px`;
image.style.height = `${naturalHeight}px`;
}
};
loadedImage.src = image.src;
observer.unobserve(image);
}
});
});
observer.observe(image);
}
// example usage
const images = document.querySelectorAll('img');
images.forEach(observeImage);