微信小程序如何利用createIntersectionObserver实现图片懒加载
节点布局相交状态 API
可用于监听两个或多个组件节点在布局位置上的相交状态。这一组API常常可以用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。节点布局相交状态 API中有一个 wx.createIntersectionObserver(Object this, Objectoptions)
Api （支持版本 >= 1.9.3），它的作用是创建并返回一个 IntersectionObserver
对象实例(交叉区域)，这个对象实例在小程序的解说如下：IntersectionObserver 对象，用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见，它有：relativeTo、relativeToViewport、observe、disconnect等方法
由此我们可以设置图片进入可见界面某一区域时的监听回调事件，以此实现图片的懒加载文章来源：https://www.toymoban.com/news/detail-767546.html
Page({
data: {
group: [
{
src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
...... // 更多图片信息
]
},
onLoad: function () {
let group = this.data.group // 获取原数据
for (let i in group) {
// 设置监听回调事件，当元素 .loadImg{{i}},进入页面20px内就触发回调事件，设置图片为真正的图片，通过show控制
wx.createIntersectionObserver().relativeToViewport({ bottom: 20 }).observe('.loadImg' + i, (ret) => {
if (ret.intersectionRatio > 0) {
group[i].show = true
}
this.setData({ // 更新数据
group
})
})
}
}
})
<block wx:for="{{group}}" wx:key="1">
<view class="loadImg loadImg{{index}} {{item.show? 'active' : ''}}" >
<!-- 通过条件判断确认图片的src -->
<image wx:if='{{item.show}}' style='width:100%;height:100%;' src='{{item.src}}'></image>
<image wx:else style='width:20%;height:20%;margin:0 auto;margin-top:50%;transform:translateY(-50%);' src='{{item.def}}' mode='aspectFit'></image>
</view>
</block>
.loadImg{
width:100vw;
height:46.3vw;
transition: all .2s ease-in-out;
opacity: 0;
}
.loadImg.active{
opacity: 1
}
到这里也就结束了，希望对您有所帮助。文章来源地址https://www.toymoban.com/news/detail-767546.html
到了这里，关于微信小程序如何利用createIntersectionObserver实现图片懒加载的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
