CSS 圖片整平加載（image lazy loading）是一種優化網站性能的技術，它可以讓頁面更快加載，提高用戶體驗。

CSS 提供了幾種不同的圖片加載方式：

/* 在頁面加載時立即加載圖片 */
img {
display: block;
height: auto;
width: auto;
}
/* 懶加載圖片 */
img.lazy {
display: block;
height: auto;
width: auto;
opacity: 0;
transition: opacity .2s ease-in-out;
}
/* 當圖片出現在視口中時加載 */
img.lazy.loaded {
opacity: 1;
}

要實現圖片整平加載，需要使用 JavaScript 和 CSS。

window.addEventListener('load', function() {
var lazyImages = [].slice.call(document.querySelectorAll('img.lazy'));
if ('IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype) {
var lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.intersectionRatio >0) {
var lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove('lazy');
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
var lazyLoad = function() {
lazyImages.forEach(function(lazyImage) {
if (lazyImage.getBoundingClientRect().top<= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0 && getComputedStyle(lazyImage).display !== 'none') {
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove('lazy');
lazyImages = lazyImages.filter(function(image) {
return image !== lazyImage;
});
if (lazyImages.length === 0) {
document.removeEventListener('scroll', lazyLoad);
window.removeEventListener('resize', lazyLoad);
window.removeEventListener('orientationchange', lazyLoad);
}
}
});
};
document.addEventListener('scroll', lazyLoad);
window.addEventListener('resize', lazyLoad);
window.addEventListener('orientationchange', lazyLoad);
}
});

這段代碼使用了 IntersectionObserver，但是如果瀏覽器不支持，就會使用基于滾動事件的方案。

實現了圖片整平加載之后，圖片會在進入視口時才開始加載，這可以讓頁面更快加載，提高用戶體驗。