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

最新推荐文章于 2025-06-14 23:34:24 发布

zhongjunyao

最新推荐文章于 2025-06-14 23:34:24 发布

阅读量9.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：小程序图片懒加载

本文链接：https://blog.youkuaiyun.com/zjy_android_blog/article/details/82726859

微信小程序专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍微信小程序中实现图片懒加载的三种方法：利用WXML节点布局相交状态API监听图片进入可视区域、设置图片lazy-load属性为true以及通过onPageScroll事件实现。文章通过示例代码展示了如何在不同库版本下实现懒加载，适用于多种小程序开发场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、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 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>

test.wxss

/* 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()
  }
})