图片懒加载是指在图片进入可视区域之前不进行加载，当图片即将进入可视区域时才进行加载。这样可以减少页面的加载时间，提高页面的性能。下面是使用JavaScript进行图片懒加载的一般步骤：
下面是一个简单的图片懒加载实现：
javascript
function lazyLoad() {
const images = document.querySelectorAll('img[data-src]');
const windowHeight = window.innerHeight;
images.forEach((image) => {
const rect = image.getBoundingClientRect();
if (rect.top < windowHeight) {
image.src = image.dataset.src;
image.removeAttribute('data-src');
}
});
}
window.addEventListener('scroll', lazyLoad);
图片预加载是指在页面加载时预先加载所有需要显示的图片，这样在图片需要显示时就可以直接从缓存中获取，提高图片的加载速度，提高用户体验。下面是使用JavaScript进行图片预加载的一般步骤：
下面是一个简单的图片预加载实现：
javascript
function preLoadImages() {
const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
images.forEach((image) => {
const img = new Image();
img.onload = function() {
console.log(image + ' loaded');
};
img.src = image;
});
}
preLoadImages();