小程序lazyload
时间: 2023-12-30 19:15:07 浏览: 24
小程序的lazyload是一种懒加载技术,它可以延迟加载页面中的图片,视频等资源,以减少页面加载时间和提高用户体验。在小程序中,可以使用wx.createIntersectionObserver()方法来创建一个IntersectionObserver实例,然后使用该实例的observe()方法观察页面中的节点,当节点进入或离开可视区域时触发回调函数,从而实现懒加载。
下面是一个简单的示例代码:
```javascript
// 在Page中创建IntersectionObserver实例
Page({
onLoad: function () {
const intersectionObserver = wx.createIntersectionObserver(this)
intersectionObserver.relativeToViewport().observe('.lazyload', (res) => {
if (res.intersectionRatio > 0) {
// 当节点进入可视区域时加载资源
const lazyload = res.dataset.lazyload
if (lazyload) {
res.target.src = lazyload
delete res.dataset.lazyload
}
}
})
}
})
```
在页面中,需要将需要延迟加载的图片节点设置为class="lazyload",并将需要加载的资源路径放入data-lazyload属性中,例如:
```html
<image class="lazyload" data-lazyload="https://example.com/image.jpg"></image>
```
这样,在页面滚动时,当图片节点进入可视区域时,IntersectionObserver就会触发回调函数,从而将图片加载出来。