在现代网页开发中，图片占据了页面的主要内容之一。为了提高页面加载速度和用户体验，我们可以使用JavaScript实现图片的预加载和懒加载技术。
图片预加载
图片预加载是指在页面加载时提前加载需要显示的图片，以避免用户等待或延迟加载图片的情况。下面是通过JavaScript实现图片预加载的示例代码：
// 预加载图片的方法
function preloadImage(url) {
return new Promise((resolve, reject) => {
const img = new Image();
img.src = url;
img.onload = resolve;
img.onerror = reject;
});
}
// 预加载图片
preloadImage('image1.jpg').then(() => {
console.log('图片1加载完毕');
}).catch(() => {
console.log('图片1加载失败');
});
preloadImage('image2.jpg').then(() => {
console.log('图片2加载完毕');
}).catch(() => {
console.log('图片2加载失败');
});
在上述代码中，我们定义了一个preloadImage函数，它接受一个图片URL作为参数，并返回一个Promise对象。在函数内部，我们创建了一个新的Image对象，将图片URL赋值给src属性，并通过onload和onerror事件监听图片加载完成和加载失败的情况。
在调用preloadImage函数时，我们可以通过then方法处理加载成功的回调，通过catch方法处理加载失败的回调。
图片懒加载
图片懒加载是指在用户滚动到需要显示图片的位置时才加载该图片，以减少页面初次加载的时间和资源消耗。下面是通过JavaScript实现图片懒加载的示例代码：
// 判断元素是否在可视区域内的方法
function isInViewport(el) {
const rect = el.getBoundingClientRect();
return (
rect.top >=0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
// 懒加载图片的方法
function lazyLoadImages() {
const images = document.querySelectorAll('img[data-src]');
images.forEach((img) => {
if (isInViewport(img)) {
img.src = img.dataset.src;
img.removeAttribute('data-src');
}
});
}
// 监听滚动事件
window.addEventListener('scroll', lazyLoadImages);
// 初始加载一次
lazyLoadImages();
在上述代码中，我们首先定义了一个isInViewport方法来判断元素是否在可视区域内。利用元素的getBoundingClientRect方法获取元素的位置信息，并通过判断元素的上、左、下、右四个边界坐标是否在可视区域内来确定元素是否可见。
接着定义了lazyLoadImages方法来懒加载图片。使用querySelectorAll方法获取所有带有data-src属性的图片元素，并遍历每个元素判断其是否在可视区域内，如果在则将data-src属性的值赋给src属性，并移除data-src属性。
最后，我们通过window.addEventListener方法监听滚动事件，并在初始化时调用一次lazyLoadImages方法来完成懒加载。
结语
通过JavaScript实现图片预加载和懒加载技术，可以有效提高页面加载速度和用户体验。预加载使得图片在页面显示前已经加载完毕，懒加载则减少了页面初次加载的时间和资源消耗。这两种技术可以结合使用，根据具体需求来优化页面性能。希望本文对你有所帮助！
本文来自极简博客，作者：星辰守望者，转载请注明原文链接：通过JavaScript实现图片预加载与懒加载
