在前端開發中，經常需要使用圖片來裝飾網頁或提升用戶體驗。然而，隨著網站規模的不斷擴大，加載大量圖片會大大降低用戶的使用體驗。因此，我們需要一種能夠根據需要自動加載圖片的方式。

// 圖片延遲加載
function lazyLoad() {
const imgs = document.querySelectorAll('img[data-src]');
imgs.forEach(function (item) {
if (item.getBoundingClientRect().top< window.innerHeight) {
item.src = item.dataset.src;
item.removeAttribute('data-src');
}
});
}
window.addEventListener('load', lazyLoad);
window.addEventListener('scroll', lazyLoad);

上述代碼通過判斷圖片是否在屏幕內，動態加載圖片。這種方式不僅可以減小頁面資源的占用，還可以提高頁面的響應速度和用戶體驗。

另外，我們也可以通過CSS實現背景圖片的延遲加載。

// 背景延遲加載
function delayBgLoad() {
const items = document.querySelectorAll('.delay-bg-load');
items.forEach(function (item) {
if (item.getBoundingClientRect().top< window.innerHeight) {
item.classList.add('load');
}
});
}
window.addEventListener('load', delayBgLoad);
window.addEventListener('scroll', delayBgLoad);

這種方式可以使用CSS的background-image屬性，在需要時加載背景圖片，同樣可以減少頁面加載時間。

綜上所述，通過JS和CSS的自動加載圖片，可以大大提高網站的用戶體驗，同時更加有效地利用頁面資源。