微信小程序图片懒加载

加油乐
747 阅读1分钟

一、原始方法实现

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', 'https://img0.baidu.com/it/u=307567652,4252156023&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=334')
    }
})

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 插件

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

image.png

mina-lazy-image 外部样式类

image-class, image-container-class

使用流程

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

image.png

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

image.png

  • 3. 打开终端安装插件
npm install --save mina-lazy-image

页面代码

  • wxml代码
<view wx:for="{{list}}">
  <mina-lazy-image placeholder="https://img0.baidu.com/it/u=307567652,4252156023&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=334" 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"
  }
}

三、 文档属性实现

特别注意：图片懒加载只针对 page 与 scroll-view 下的 image 有效。

属性名类型默认值说明
lazy-loadBooleanfalse图片懒加载，在即将进入一定范围（上下三屏）时才开始加载
  • 因此，我们只需在 image 属性中增加该属性就可以了

隐藏属性

  • 可控制图片懒加载的触发阈值
属性名类型默认值说明
lazy-load-marginNumber—图片懒加载屏数阈值，在即将进入设置的屏数才开始加载

特别注意：图片懒加载只针对 page 与 scroll-view 下的 image 有效。

avatar
文章
阅读
粉丝