微信小程序如何利用createIntersectionObserver实现图片懒加载

微信小程序如何利用createIntersectionObserver实现图片懒加载

  • 节点布局相交状态 API

    可用于监听两个或多个组件节点在布局位置上的相交状态。这一组API常常可以用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。

  • 节点布局相交状态 API中有一个 wx.createIntersectionObserver(Object this, Objectoptions)

    Api (支持版本 >= 1.9.3),它的作用是创建并返回一个 IntersectionObserver

    对象实例(交叉区域),这个对象实例在小程序的解说如下:

  • IntersectionObserver 对象,用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见,它有:relativeTo、relativeToViewport、observe、disconnect等方法

  • 由此我们可以设置图片进入可见界面某一区域时的监听回调事件,以此实现图片的懒加载

javascript 复制代码
 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
          })
        })
      }
    }
  })
javascript 复制代码
<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>
javascript 复制代码
.loadImg{
    width:100vw;
    height:46.3vw;
    transition: all .2s ease-in-out;
    opacity: 0;
  }
  .loadImg.active{
    opacity: 1
  }

到这里也就结束了,希望对您有所帮助。

相关推荐
weixin_lynhgworld6 小时前
盲盒抽卡机小程序系统开发:连接线上线下娱乐新桥梁
小程序·娱乐
程知农7 小时前
uniapp_微信小程序_根据胶囊按钮计算出的导航栏高度为什么不是44px?
微信小程序·小程序·uni-app
鲲鹏猿10 小时前
微信小程序——早餐小程序
微信小程序·小程序
说私域10 小时前
基于开源AI智能名片链动2+1模式与S2B2C商城小程序的微商品牌规范化运营研究
人工智能·小程序·开源
2501_9159090610 小时前
iOS 加固工具实战解析,主流平台审核机制与工具应对策略
android·ios·小程序·https·uni-app·iphone·webview
The_era_achievs_hero10 小时前
UniappDay04
vue.js·微信小程序·uni-app
2501_9151063212 小时前
iOS WebView 调试实战,第三方脚本加载失败与内容安全策略冲突问题排查指南
android·ios·小程序·https·uni-app·iphone·webview
paopaokaka_luck17 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
老虎06271 天前
JavaWeb(苍穹外卖)--学习笔记13(微信小程序开发,缓存菜品,Spring Cache)
笔记·学习·微信小程序
郭邯1 天前
小程序中自定义组件的样式隔离
微信小程序