在小程序开发中，优化图片加载是一个非常重要的步骤，因为图片加载是占用网络资源较多的操作之一。特别是在列表页中，如果一开始就加载所有的图片，会导致页面加载速度变慢，用户体验较差。为了解决这一问题，我们可以使用图片懒加载和预加载的技术来优化小程序的性能。
图片懒加载
图片懒加载是指只加载用户可视区域内的图片，当用户滚动页面时才会加载该部分的图片。这样做可以减少不必要的网络请求，从而提高页面加载速度。在小程序中，我们可以通过 Intersection Observer API 来实现图片懒加载。
使用 Intersection Observer API 实现图片懒加载
Intersection Observer API 是小程序端浏览器所支持的一个 API，可以监听指定节点在视口中的位置信息。我们可以通过该 API 来监听图片是否进入视口区域，从而实现图片的懒加载。
首先，在需要进行懒加载的图片标签中，将图片的 src 属性设置为一个默认的占位图，例如：
<image src="placeholder.png" class="lazy-load" data-src="image.jpg"></image>
然后，我们需要在页面中注册一个 Intersection Observer 实例，并指定需要监听的节点和回调函数。当节点进入视口时，就可以将 data-src 属性的值赋给 src 属性，实现图片的动态加载。
Page({
onLoad() {
const observer = wx.createIntersectionObserver(this)
observer.relativeToViewport().observe('.lazy-load', (res) => {
if (res.intersectionRatio > 0) {
const image = res.dataset.src
this.setData({
src: image
})
observer.disconnect()
}
})
}
})
通过以上代码，当图片进入视口时，src 属性将被修改为真实的图片地址，图片将被加载并显示出来。
添加滚动防抖
为了避免频繁触发图片懒加载，我们可以添加滚动防抖的机制。即等待一段时间，如果连续滚动结束后仍然在视口内，则触发图片加载。
Page({
onLoad() {
let timer = null
const observer = wx.createIntersectionObserver(this)
observer.relativeToViewport().observe('.lazy-load', (res) => {
if (res.intersectionRatio > 0) {
clearTimeout(timer)
timer = setTimeout(() => {
const image = res.dataset.src
this.setData({
src: image
})
observer.disconnect()
}, 300)
}
})
}
})
通过添加滚动防抖机制，可以有效减少图片加载的频率，提高页面性能。
图片预加载
除了图片懒加载，我们还可以使用图片预加载的技术来提前加载用户即将访问的页面的图片。这样做可以避免用户在浏览页面时出现明显的图片加载延迟，提高用户体验。
使用 Image 预加载图片
在小程序中，可以使用 Image 对象来实现图片的预加载。在页面加载时，我们可以创建一个 Image 对象，并将需要预加载的图片地址赋给其 src 属性。
Page({
onLoad() {
const image = new Image()
image.src = 'image.jpg'
}
})
通过以上代码，图片将会被提前加载，当用户访问到这张图片时，可以直接从缓存中读取，减少了网络请求的时间。
添加加载完成回调
为了更好地掌握图片的加载情况，我们可以为 Image 对象添加一个加载完成的回调函数。当图片加载完成后，我们可以进行一些处理，例如将图片显示在页面上。
Page({
onLoad() {
const image = new Image()
image.src = 'image.jpg'
image.onload = () => {
// 图片加载完成后的回调处理
this.setData({
src: image.src
})
}
}
})
通过添加加载完成的回调，可以在确保图片加载完成后再进行其他操作，提供更好的用户体验。
总结
通过使用图片懒加载和预加载的技术，我们可以有效地优化小程序的性能。图片懒加载可以减少不必要的网络请求，提高页面加载速度；图片预加载可以避免用户在浏览时出现明显的图片加载延迟，提高用户体验。在小程序开发中，对图片加载进行合理的优化是非常重要的步骤。
本文来自极简博客，作者：飞翔的鱼，转载请注明原文链接：小程序中的图片懒加载与预加载
