微信小程序——图片懒加载及其兼容方式

其他 2018-10-13 05:31:17 阅读次数: 0
版权声明：本文为博主原创文章，仅供学习交流，未经博主允许不得转载。 https://blog.csdn.net/zjy_android_blog/article/details/82726859

一、WXML节点布局相交状态(通过微信的API实现懒加载)

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

节点布局相交状态 API中有一个 wx.createIntersectionObserver(Object this, Object options) Api （支持版本 >= 1.9.3），它的作用是创建并返回一个 IntersectionObserver 对象实例(交叉区域)，这个对象实例在小程序的解说如下：

IntersectionObserver 对象，用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。
方法
IntersectionObserver.relativeTo(string selector, Object margins)
使用选择器指定一个节点，作为参照区域之一。

IntersectionObserver.relativeToViewport(Object margins)
指定页面显示区域作为参照区域之一

IntersectionObserver.observe(string targetSelector, IntersectionObserver.observeCallback callback)
指定目标节点并开始监听相交状态变化情况

IntersectionObserver.disconnect()
停止监听。回调函数将不再触发

这里我们需要用到第二个方法 relativeToViewport ：

IntersectionObserver.relativeToViewport(Object margins)

指定页面显示区域作为参照区域之一
下面的示例代码中，如果目标节点（用选择器 .target-class 指定）进入显示区域以下 100px 时，就会触发回调函数。

Page({
  onLoad: function(){
    wx.createIntersectionObserver().relativeToViewport({bottom: 100}).observe('.target-class', (res) => {
      res.intersectionRatio // 相交区域占目标节点的布局区域的比例
      res.intersectionRect // 相交区域
      res.intersectionRect.left // 相交区域的左边界坐标
      res.intersectionRect.top // 相交区域的上边界坐标
      res.intersectionRect.width // 相交区域的宽度
      res.intersectionRect.height // 相交区域的高度
    })
  }
})

由此我们可以设置图片进入可见界面某一区域时的监听回调事件，具体代码如下（这里使用了从csdn获取的的图片链接，如有侵权请联系作者删除）：
test.js代码：

// pages/test/test.js
Page({
  data: {
    group: [
      {
        src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.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
        })
      })
    }

  }
})

test.wxml

<!--pages/test/test.wxml-->
<block wx:for="{{group}}" wx:key="1">
  <view class="loadImg loadImg{{index}} {{item.show? 'active' : ''}}" >
    <image style='width:100%;height:100%;' src='{{item.show? item.src : item.def}}'></image>
  </view>
</block>

test.wxss

扫描二维码关注公众号，回复： 3555665 查看本文章 
/* pages/test/test.wxss */
.loadImg{
  width:100vw;
  height:46.3vw;
  transition: all .2s ease-in-out;
  opacity: 0;
}
.loadImg.active{
  opacity: 1
}

二、设置图片lazy-load值为true实现懒加载（要求最低的库版本1.5.0）

lazy-load Boolean false 图片懒加载。只针对page与scroll-view下的image有效

三、设置onPageScroll实现懒加载

以上两种方式都对小程序库版本有要求，如果对于低版本的库就不能使用了，这里我们采取另外一种方式，虽然也有库版本要求，但是支持版本 >= 1.4.0，在小程序的page中有个onPageScroll事件，我们可以监听图片进入显示区域来设置回调事件。

test.wxml和test.wxss不变，改变的是test.js，具体如下：

// pages/test/test.js
// 设置函数防抖
const debounce = (fn, delay=300) => {
  let ctx,
      args;
  let timer = null;
  const later = function(){
    fn.apply(ctx, args)
    timer = null;
  }
  return function(){
    ctx = this
    args = arguments;
    if(timer){
      clearTimeout(timer)
      timer = null
    }
  }
  timer = setTimeout(later, delay )  
}
Page({
  data: {
    height: '', // 获取当前页面的可视高度
    group: [
      {
        src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      },
      {
        src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
        show: false,
        def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
      }
    ]
  },
  onLoad: function () {
    wx.getSystemInfo({  // 获取页面可视区域的高度
      success: (res) =>{
        this.setData({
          height: res.screenHeight
        })
      },
    })
    this.showImg()
  },
  onPageScroll:function() {  // 调用showImg函数
    debounce(this.showImg())
  },

  showImg() {  // 判断高度是否需要加载
    // wx.createSelectorQuery()支持的最低库版本是1.4
    // selectAll作用是查询元素，boundingClientRect获取元素的相关信息
    wx.createSelectorQuery().selectAll('.loadImg').boundingClientRect((ret) => {
      const group = this.data.group     // 获取原数据
      const height = this.data.height   // 获取可视区域高度
      ret.forEach((item, index) => {
        // console.log(item)
        // 这里top值获取的是元素相对于可视区域左上角(0,0)的垂直坐标值,超过(0,0)，top值为负数
        // 一旦元素进入可视区域,top值小于可视区域高度height
        if (item.top < height) {
          group[index].show = true
        }
      })
      this.setData({
        group
      })
    }).exec()
  }
})

猜你喜欢

转载自blog.csdn.net/zjy_android_blog/article/details/82726859
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022