devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：Gausst松鼠会 | 2024-03-27 02:24:20

赞

踩

wx.createintersectionobserver兼容

一、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 时，就会触发回调函数。

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

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

  1. // pages/test/test.js
  2. Page({
  3.   data: {
  4.     group: [
  5.       {
  6.         src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
  7.         show: false,
  8.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  9.       },
  10.       {
  11.         src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
  12.         show: false,
  13.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  14.       },
  15.       {
  16.         src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
  17.         show: false,
  18.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  19.       },
  20.       {
  21.         src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
  22.         show: false,
  23.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  24.       },
  25.       {
  26.         src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
  27.         show: false,
  28.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  29.       },
  30.       {
  31.         src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
  32.         show: false,
  33.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  34.       },
  35.       {
  36.         src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
  37.         show: false,
  38.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  39.       },
  40.       {
  41.         src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
  42.         show: false,
  43.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  44.       },
  45.       {
  46.         src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
  47.         show: false,
  48.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  49.       },
  50.       {
  51.         src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
  52.         show: false,
  53.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  54.       },
  55.       {
  56.         src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
  57.         show: false,
  58.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  59.       },
  60.       {
  61.         src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
  62.         show: false,
  63.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  64.       },
  65.       {
  66.         src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
  67.         show: false,
  68.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  69.       },
  70.       {
  71.         src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
  72.         show: false,
  73.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  74.       },
  75.       {
  76.         src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
  77.         show: false,
  78.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  79.       },
  80.       {
  81.         src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
  82.         show: false,
  83.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  84.       },
  85.       {
  86.         src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
  87.         show: false,
  88.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  89.       },
  90.       {
  91.         src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
  92.         show: false,
  93.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  94.       }
  95.     ]
  96.   },
  97.   onLoad: function () {
  98.     let group = this.data.group  // 获取原数据
  99.     for (let i in group) {
  100.       // 设置监听回调事件，当元素 .loadImg{{i}},进入页面20px内就触发回调事件，设置图片为真正的图片，通过show控制
  101.       wx.createIntersectionObserver().relativeToViewport({ bottom: 20 }).observe('.loadImg' + i, (ret) => {
  102.         if (ret.intersectionRatio > 0) {
  103.           group[i].show = true
  104.         }
  105.         this.setData({ // 更新数据
  106.           group
  107.         })
  108.       })
  109.     }
  110.  
  111.   }
  112. })

test.wxml

  1. <!--pages/test/test.wxml-->
  2. <block wx:for="{{group}}" wx:key="1">
  3.   <view class="loadImg loadImg{{index}} {{item.show? 'active' : ''}}" >
  4.     <image wx:if='{{item.show}}' style='width:100%;height:100%;' src='{{item.src}}'></image>
  5.     <image wx:else style='width:20%;height:20%;margin:0 auto;margin-top:50%;transform:translateY(-50%);' src='{{item.def}}' mode='aspectFit'></image>
  6.   </view>
  7. </block>

test.wxss

  1. /* pages/test/test.wxss */
  2. .loadImg{
  3.   width:100vw;
  4.   height:46.3vw;
  5.   transition: all .2s ease-in-out;
  6.   opacity: 0;
  7. }
  8. .loadImg.active{
  9.   opacity: 1
  10. }

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

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

三、设置onPageScroll实现懒加载

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

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

  1. // pages/test/test.js
  2. // 设置函数防抖
  3. const debounce = (fn, delay=300) => {
  4.   let ctx,
  5.       args;
  6.   let timer = null;
  7.   const later = function(){
  8.     fn.apply(ctx, args)
  9.     timer = null;
  10.   }
  11.   return function(){
  12.     ctx = this
  13.     args = arguments;
  14.     if(timer){
  15.       clearTimeout(timer)
  16.       timer = null
  17.     }
  18.   }
  19.   timer = setTimeout(later, delay )  
  20. }
  21. Page({
  22.   data: {
  23.     height: '', // 获取当前页面的可视高度
  24.     group: [
  25.       {
  26.         src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
  27.         show: false,
  28.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  29.       },
  30.       {
  31.         src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
  32.         show: false,
  33.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  34.       },
  35.       {
  36.         src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
  37.         show: false,
  38.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  39.       },
  40.       {
  41.         src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
  42.         show: false,
  43.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  44.       },
  45.       {
  46.         src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
  47.         show: false,
  48.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  49.       },
  50.       {
  51.         src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
  52.         show: false,
  53.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  54.       },
  55.       {
  56.         src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
  57.         show: false,
  58.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  59.       },
  60.       {
  61.         src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
  62.         show: false,
  63.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  64.       },
  65.       {
  66.         src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
  67.         show: false,
  68.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  69.       },
  70.       {
  71.         src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
  72.         show: false,
  73.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  74.       },
  75.       {
  76.         src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
  77.         show: false,
  78.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  79.       },
  80.       {
  81.         src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
  82.         show: false,
  83.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  84.       },
  85.       {
  86.         src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
  87.         show: false,
  88.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  89.       },
  90.       {
  91.         src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
  92.         show: false,
  93.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  94.       },
  95.       {
  96.         src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
  97.         show: false,
  98.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  99.       },
  100.       {
  101.         src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
  102.         show: false,
  103.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  104.       },
  105.       {
  106.         src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
  107.         show: false,
  108.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  109.       },
  110.       {
  111.         src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
  112.         show: false,
  113.         def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
  114.       }
  115.     ]
  116.   },
  117.   onLoad: function () {
  118.     wx.getSystemInfo({  // 获取页面可视区域的高度
  119.       success: (res) =>{
  120.         this.setData({
  121.           height: res.screenHeight
  122.         })
  123.       },
  124.     })
  125.     this.showImg()
  126.   },
  127.   onPageScroll:function() {  // 调用showImg函数
  128.     debounce(this.showImg())
  129.   },
  130.  
  131.   showImg() {  // 判断高度是否需要加载
  132.     // wx.createSelectorQuery()支持的最低库版本是1.4
  133.     // selectAll作用是查询元素，boundingClientRect获取元素的相关信息
  134.     wx.createSelectorQuery().selectAll('.loadImg').boundingClientRect((ret) => {
  135.       const group = this.data.group     // 获取原数据
  136.       const height = this.data.height   // 获取可视区域高度
  137.       ret.forEach((item, index) => {
  138.         // console.log(item)
  139.         // 这里top值获取的是元素相对于可视区域左上角(0,0)的垂直坐标值,超过(0,0)，top值为负数
  140.         // 一旦元素进入可视区域,top值小于可视区域高度height
  141.         if (item.top < height) {
  142.           group[index].show = true
  143.         }
  144.       })
  145.       this.setData({
  146.         group
  147.       })
  148.     }).exec()
  149.   }
  150. })

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/321273
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号