懒加载（Lazy Load）是指在页面加载时，先不加载图片等资源，等到这些资源将要用到时再去加载它们。这样可以减少页面加载时的请求次数，缩短页面加载时间，提高用户体验。
src 属性设为占位图或空字符串。src 属性设置为真正的图片地址。const lazyImages = document.querySelectorAll('.lazy');
function lazyLoad() {
lazyImages.forEach(image => {
if (image.getBoundingClientRect().top < window.innerHeight) {
image.src = image.dataset.src;
image.classList.remove('lazy');
}
});
}
window.addEventListener('scroll', lazyLoad);流畅滚动效果（Smooth Scrolling）是指在页面滚动时，页面不是一下子跳到目标位置，而是平滑地滚动过去。这样可以使页面滚动更加自然，提高用户体验。
function smoothScroll(target, duration) {
const targetPosition = target.getBoundingClientRect().top;
const startPosition = window.pageYOffset;
const distance = targetPosition - startPosition;
let startTime = null;
function animation(currentTime) {
if (startTime === null) startTime = currentTime;
const timeElapsed = currentTime - startTime;
const run = ease(timeElapsed, startPosition, distance, duration);
window.scrollTo(0, run);
if (timeElapsed < duration) requestAnimationFrame(animation);
}
function ease(t, b, c, d) {
t /= d / 2;
if (t < 1) return c / 2 * t * t + b;
t--;
return -c / 2 * (t * (t - 2) - 1) + b;
}
requestAnimationFrame(animation);
}
const links = document.querySelectorAll('a[href^="#"]');
links.forEach(link => {
link.addEventListener('click', e => {
e.preventDefault();
const target = document.querySelector(link.getAttribute('href'));
smoothScroll(target, 1000);
});
});在上面的代码中，smoothScroll 函数用于滚动到指定的目标位置，ease 函数用于实现缓动效果，links 变量用于获取所有带有锚点的链接，并添加点击事件。