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

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

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

  • 节点布局相交状态 API
    可用于监听两个或多个组件节点在布局位置上的相交状态。这一组API常常可以用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。
  • 节点布局相交状态 API中有一个 wx.createIntersectionObserver(Object this, Objectoptions)
    Api (支持版本 >= 1.9.3),它的作用是创建并返回一个 IntersectionObserver
    对象实例(交叉区域),这个对象实例在小程序的解说如下:
  • IntersectionObserver 对象,用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见,它有:relativeTo、relativeToViewport、observe、disconnect等方法
  • 由此我们可以设置图片进入可见界面某一区域时的监听回调事件,以此实现图片的懒加载
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
  }

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

相关文章
|
7月前
|
人工智能 小程序 前端开发
【一步步开发AI运动小程序】十九、运动识别中如何解析RGBA帧图片?
本文介绍了如何将相机抽取的RGBA帧图像解析为`.jpg`或`.png`格式,适用于体测、赛事等场景。首先讲解了RGBA图像结构,其为一维数组,每四个元素表示一个像素的颜色与透明度值。接着通过`uni.createOffscreenCanvas()`创建离屏画布以减少绘制干扰,并提供代码实现,将RGBA数据逐像素绘制到画布上生成图片。最后说明了为何不直接使用拍照API及图像转换的调用频率建议,强调应先暂存帧数据,运动结束后再进行转换和上传,以优化性能。
|
9月前
|
人工智能 自然语言处理
使用企业微信或公众号自动回复图片消息
AppFlow支持企业微信和公众号接收图片消息,并提供两种回复方式。方式一:直接回复图片消息,用户发送图片后立即收到回复,但无法继续追问。方式二:先保存图片,待用户发送文字后再一并处理并回复。配置步骤包括选择模板、配置鉴权信息、设置执行动作参数及发布连接流。详细操作可参考相关文档。
838 1
使用企业微信或公众号自动回复图片消息
|
小程序
小程序消除图片下边距的三个方法
小程序消除图片下边距的三个方法
230 69
|
12月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
2906 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
12月前
|
算法 小程序 Java
java制作海报三:获取微信二维码详情,并改变大小,合成到海报(另一张图片)上
这篇文章介绍了如何使用Java获取微信小程序的二维码,并将其调整大小后合成到海报(另一张图片)上。
218 0
|
运维 小程序 前端开发
小程序开发问题之在小程序中调用my.chooseImage接口让用户选择图片如何解决
小程序开发问题之在小程序中调用my.chooseImage接口让用户选择图片如何解决
|
前端开发 小程序
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
684 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的图片推荐系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的图片推荐系统附带文章源码部署视频讲解等
147 0
|
小程序 前端开发
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
961 0

热门文章

最新文章