微信小程序优化：如何实现图片懒加载？

前言

当我们在使用微信小程序浏览图片时，不可避免地会遇到加载缓慢的情况。这不仅会影响用户体验，还会耗费用户的流量。那么，有没有一种方法可以让图片在用户需要时再进行加载，从而提升用户体验和减少流量消耗呢？答案是肯定的，这就是图片懒加载技术。在本文中，我将介绍如何使用微信小程序实现图片懒加载，为用户带来更好体验和更高的效率。

---

为什么要使用图片懒加载？

试想一下，在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。

图片的懒加载就是为了解决以上问题。在滚动屏幕之前，可视化区域之外的图片不会进行加载，在滚动屏幕时才加载。这样使得网页的加载速度更快，减少了服务器的负载。懒加载适用于图片较多，页面列表较长的场景中。

---

使用图片懒加载的优点

减少无用资源的加载，提升用户体验，如果同时加载较多图片，可能需要等待的时间较长，这样影响了用户体验，而使用懒加载就能大大的提高用户体验。防止加载过多图片而影响其他资源文件的加载。

---

第一种实现方式（手动实现）

wxml页面代码

<view class='item-{{index}}' wx:for="{{lazyList}}" wx:key="*this.imgUrl">
  <!-- imgBox:图片类名 loadingImgBox:懒加载图片类名 -->
  <image src='{{item.show? item.imgUrl : loading}}' class='{{item.show? "imgBox" : "loadingImgBox"}}'></image>
</view>

js页面代码

Page({
    data: {
        lazyList: [{
                imgUrl: "https://img0.baidu.com/it/u=2566646385,2213824192&fm=253&fmt=auto&app=138&f=JPEG?w=893&h=500"
            },
            {
                imgUrl: "https://img2.baidu.com/it/u=791640261,44080610&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
            },
            {
                imgUrl: "https://img0.baidu.com/it/u=1732772480,1050889914&fm=253&fmt=auto&app=138&f=JPEG?w=778&h=500"
            },
            {
                imgUrl: "https://img1.baidu.com/it/u=4001530358,139416054&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
            },
            {
                imgUrl: "https://img1.baidu.com/it/u=3006525416,739516061&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
            },
            {
                imgUrl: "https://img1.baidu.com/it/u=961451472,675417960&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
            },
            {
                imgUrl: "https://img0.baidu.com/it/u=4085930884,4214873769&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500"
            },
        ], //模拟数据
    },
    onLoad: function () {
        // 传入参数
        lazyImg(this, this.data.lazyList, 'lazyList', '../../assets/loading.gif')
    }
})

const lazyImg = (_that, data, name, loadingImage) => {
    for (let i = 0, len = data.length; i < len; i++) {
        wx.createIntersectionObserver().relativeToViewport({
            bottom: 20
        }).observe('.item-' + i, (ret) => {
            ret.intersectionRatio > 0 ? data[i].show = true : '';
            _that.setData({
                [name]: data,
                loading: loadingImage
            })
        })
    }
}

wxss页面代码

image {
    width: 100%;
}
/* 懒加载图片样式 */
.loadingImgBox {
    transition: opacity 0.4s linear 0.4s;
}

---

第二种实现方式（安装插件）

mina-lazy-image 插件

图片在视口中出现才进行加载显示，优化页面性能。

属性	类型	是否必填	描述
src	String	是	图片链接
placeholder	String	否	占位图片链接
mode	String	否	与 image 组件的 mode 属性一致
webp	Number	否	与 image 组件的 webp 属性一致
showMenuByLongpress	Boolean	否	与 image 组件的 show-menu-by-longpress属性一致
styles	String	否	设置图片样式
viewport	Object	否	默认为 {bottom: 0}，配置图片显示区域

mina-lazy-image 外部样式类

image-class, image-container-class

---

使用

1. 微信开发工具左上角找到 “工具” 选择 “构建 npm”

---

2. 微信开发工具右上角中找到详情，选择本地设置，将使用 npm 模块勾选。

---

3. 打开终端安装插件

npm install --save mina-lazy-image

---

代码实现

wxml页面代码

<view wx:for="{{list}}">
  <mina-lazy-image placeholder="../../assets/loading.gif" src="{{item.url}}" mode="widthFIx" image-class="custom-class-name" />
</view>

js页面代码

Page({
    data: {
        // 模拟数据
        list: [{
                url: "https://img0.baidu.com/it/u=2566646385,2213824192&fm=253&fmt=auto&app=138&f=JPEG?w=893&h=500"
            },
            {
                url: "https://img2.baidu.com/it/u=791640261,44080610&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
            },
            {
                url: "https://img0.baidu.com/it/u=1732772480,1050889914&fm=253&fmt=auto&app=138&f=JPEG?w=778&h=500"
            },
            {
                url: "https://img1.baidu.com/it/u=4001530358,139416054&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
            },
            {
                url: "https://img1.baidu.com/it/u=3006525416,739516061&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
            },
            {
                url: "https://img1.baidu.com/it/u=961451472,675417960&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
            },
            {
                url: "https://img0.baidu.com/it/u=4085930884,4214873769&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500"
            },
        ],
    },
})

使用插件的 JSON 页面代码

{
  "usingComponents": {
    "mina-lazy-image": "mina-lazy-image/index"
  }
}

---

实现效果