【愚公系列】2022年09月 微信小程序-图片懒加载功能实现

• 1.安装第三方包
• 2.组件引用
• 3.wxml
• 4.js
• 5.css
• 6.效果

---

前言

大型电商，一个页面会存在非常多的图片，一次性加载图片会很慢，用户体验度不好，而图片懒加载是为了提这些网页的打开的速度，获得更好用户体验的一种手段。其选择的重要的部分先加载，次要的部分需要的时候再加载。

一、官方图片的懒加载

相关图片的API和简单案例可参考：https://cloud.tencent.com/developer/article/1973458

1.wxml

代码语言：javascript复制

<view class="page-section">
	<text class="page-section__title">use image</text>
	<scroll-view class="cardbox">
		<button
		 wx:if="{{item.live.play_urls}}"
		 class="card"
		 hover-class='none'
		 wx:for="{{content}}"
     	 wx:key="*this"
		 bindtap="gotoLive"
		 data-url="{{item.live.play_urls.hdl.ORIGIN}}"
		 data-ava="{{item.live.user_info.avatar}}"
		 data-name="{{item.live.user_info.name}}"
		 data-audience="{{item.live.audience_num}}"
		 data-lid="{{item.live.id}}"
		 data-cacheprepic="{{item.live.pic}}"
		 data-prepic="{{item.live.pic_320}}"
		 data-share_desc="{{item.live.share_info.wechat_contact.cn.text}}"
		 style="position: relative;"
		>
			<view class="image_card">
				<image class="showpic" mode="aspectFill" src="{{item.live.pic_320}}" lazy-load="{{true}}" />
				<view class="cover" />
				<text class="audience">{{item.live.audience_num}}观众</text>
			</view>
			<view class="user_card" catchtap="gotoHome" data-uid="{{item.live.user_info.id}}">
				<view class="avabox">
					<image src="{{item.live.user_info.avatar}}" lazy-load="{{true}}" class="ava" data-uid="{{item.live.user_info.id}}" />
					<image class="vip" wx:if="{{item.live.vip}}" lazy-load="{{true}}" src="http://img08.oneniceapp.com/upload/resource/9e7ca7ece11143b49fc952cfb2520e43.png" />
				</view>
				<text class="user_name">{{item.live.user_info.name}}</text>
			</view>
		</button>
		
		<button
		 wx:if="{{item.live.playback_urls}}"
		 class="card"
		 open-type='getUserInfo'
		 bindtap="gotoPlayback"
		 wx:for="{{content}}"
		 data-url="{{item.live.playback_urls.hls.ORIGIN}}"
		 wx:key="*this"
		>
			<view class="image_card">
				<image className="showpic" mode="aspectFill" src="{{item.live.pic_320}}" lazy-load="{{true}}" />
				<view class="cover" />
				<text class="audience">{{item.live.audience_num}}观众</text>
				<image class="back" lazy-load="{{true}}" src="http://img08.oneniceapp.com/upload/resource/002bdceaa732f300e33ab8b2cb84dd17.png" />
			</view>
			<view class="user_card">
				<view class="avabox">
					<image src="{{item.live.user_info.avatar}}" class="ava" lazy-load="{{true}}" />
					<image class="vip" wx:if="{{item.live.vip}}" lazy-load="{{true}}" src="http://img08.oneniceapp.com/upload/resource/9e7ca7ece11143b49fc952cfb2520e43.png" />
				</view>
				<text class="user_name">{{item.live.user_info.name}}</text>
			</view>
		</button>
	</scroll-view>
</view>

2.js

代码语言：javascript复制

const app = getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  onLoad: function () {
    wx.request({
      url: 'https://wxapi.kkgoo.cn/live/discover?type=hot',
      method:'POST',
      success:(res) => {
        console.log(res)
        this.setDis(res);
      }
    })
  },
  setDis(r) {
    let newData = r.data.data;
    this.data.nextKey = newData.nextkey ? newData.nextkey : this.data.nextKey;
    this.setData({
      content: newData.discover ? newData.discover : this.data.content,
      banneritem: newData.cards ? newData.cards.slice(0, newData.cards.length - 1) : this.data.banneritem
    })
  },
  previewImage(e){
    console.log(e);
    let url = e.currentTarget.dataset.url
    wx.previewImage({
      current:url,
      urls: [url],
    })
  }
})

3.css

代码语言：javascript复制

.lazy-image{

}


/* 用户列表相关样式 */
.main{
	font-size:0;
	width:100%;
	height: 100%;
	font-family: 'PingFangSC-Semibold';
}
.title{
	text-align:center;
	font-size: 0;
}
.u_title{
	display: inline-block;
	width:100%;
	font-size: 24rpx;
	line-height: 24rpx;
	margin:20rpx 0;
	font-weight: bold;
}
.d_title{
	display: inline-block;
	width:100%;
	line-height: 22rpx;
	font-size: 22rpx;
}
.cardbox{
	width: 100%;
	font-size: 0;
	box-sizing: border-box;
	padding: 0 32rpx;
	/*margin-top:60rpx;*/
	display: inline-block;
}
button::after{
	border: none
}
button{
  width: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	background-color: #fff;
}
.card{
	display: inline-block;
	float:left;
	/* margin-top:60rpx; */
}
.card .image_card{
	width: 268rpx;
	height: 268rpx;
	border-radius: 8rpx;
	position: relative;
}
.cover{
	position: absolute;
	/* width: 327rpx;
	height: 327rpx; */
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.3);
	z-index: 99;
	border-radius: 8rpx;
}
.card .image_card .audience{
	font-size: 22rpx;
	color:#fff;
	position: absolute;
	left:16rpx;
	top:16rpx;
	z-index:999; 
	font-weight: bold;
}
.card .image_card .back{
	position: absolute;
	right:16rpx;
	top:16rpx;
	width: 56rpx;
	height: 32rpx;
	z-index: 999;
}
.card .user_card{
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	float:left;
	margin-right: 15rpx;
}
.card .user_card .avabox{
	width:48rpx;
	height: 48rpx;
	margin-right: 15rpx;
	position: relative;
	display: inline-block;
	vertical-align: middle;
}
.card .user_card .avabox .ava{
	width: 100%;
	height: 100%;
	border-radius: 8rpx;
	vertical-align: top
}
.card .user_card .avabox .vip{
	position: absolute;
	width: 32rpx;
	height: 32rpx;
	bottom:-5rpx;
	right:-5rpx;
	border-radius: 50%;
	background: red;
}
.card .user_name {
	width: auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: inline-block;
	font-size: 24rpx;
	text-align: start;
	display: inline-block;
	vertical-align: middle;
	font-weight: bold;
}
.card:nth-child(odd){
	margin-right:32rpx;
}
.showpic{
	width: 100%;
	height: 100%;
	border-radius: 8rpx;
	overflow: hidden;
}
.scroll-end{
	float: left;
	height: 50rpx;
	width: 100%;
	color: #999;
	line-height: 50rpx;
	font-size: 28rpx;
	text-align: center;
}

4.效果

二、第三方包实现图片的懒加载

1.安装第三方包

1、开发者工具项目中，右键选择>在外部终端窗口打开

2、安装组件：npm install --save mina-lazy-image

3、勾选：使用npm模块

4、构建npm

微信开发者工具->工具->构建npm

5、在需要使用的文件，json配置文件中引入mina-lazy-image

2.组件引用

代码语言：javascript复制

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

3.wxml

代码语言：javascript复制

<view class="page-section">
	<text class="page-section__title">use mina-lazy-image</text>
	<scroll-view class="cardbox">
		<button
		 wx:if="{{item.live.play_urls}}"
		 class="card"
		 hover-class='none'
		 wx:for="{{content}}"
     wx:key="*this"
		 bindtap="gotoLive"
		 data-url="{{item.live.play_urls.hdl.ORIGIN}}"
		 data-ava="{{item.live.user_info.avatar}}"
		 data-name="{{item.live.user_info.name}}"
		 data-audience="{{item.live.audience_num}}"
		 data-lid="{{item.live.id}}"
		 data-cacheprepic="{{item.live.pic}}"
		 data-prepic="{{item.live.pic_320}}"
		 data-share_desc="{{item.live.share_info.wechat_contact.cn.text}}"
		 style="position: relative;"
		>
			<view class="image_card">
				<mina-lazy-image mode="aspectFill" src="{{item.live.pic_320}}" />
				<view class="cover" />
				<text class="audience">{{item.live.audience_num}}观众</text>
			</view>
			<view class="user_card" catchtap="gotoHome" data-uid="{{item.live.user_info.id}}">
				<view class="avabox">
					<mina-lazy-image src="{{item.live.user_info.avatar}}"  data-uid="{{item.live.user_info.id}}" />
					<image class="vip" wx:if="{{item.live.vip}}" lazy-load="{{true}}" src="http://img08.oneniceapp.com/upload/resource/9e7ca7ece11143b49fc952cfb2520e43.png" />
				</view>
				<text class="user_name">{{item.live.user_info.name}}</text>
			</view>
		</button>

		<button
		 wx:if="{{item.live.playback_urls}}"
		 class="card"
		 open-type='getUserInfo'
		 bindtap="gotoPlayback"
		 wx:for="{{content}}"
		 data-url="{{item.live.playback_urls.hls.ORIGIN}}"
		 wx:key="*this"
		>
			<view class="image_card">
				<mina-lazy-image mode="aspectFill" src="{{item.live.pic_320}}" />
				<view class="cover" />
				<text class="audience">{{item.live.audience_num}}观众</text>
				<image class="back" lazy-load="{{true}}" src="http://img08.oneniceapp.com/upload/resource/002bdceaa732f300e33ab8b2cb84dd17.png" />
			</view>
			<view class="user_card">
				<view class="avabox">
					<mina-lazy-image src="{{item.live.user_info.avatar}}"  />
					<image class="vip" wx:if="{{item.live.vip}}" lazy-load="{{true}}" src="http://img08.oneniceapp.com/upload/resource/9e7ca7ece11143b49fc952cfb2520e43.png" />
				</view>
				<text class="user_name">{{item.live.user_info.name}}</text>
			</view>
		</button>
	</scroll-view>
</view>

4.js

代码语言：javascript复制

const app = getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  onLoad: function () {
    wx.request({
      url: 'https://wxapi.kkgoo.cn/live/discover?type=hot',
      method:'POST',
      success:(res) => {
        console.log(res)
        this.setDis(res);
      }
    })
    },
    setDis(r) {
      let newData = r.data.data;
      this.data.nextKey = newData.nextkey ? newData.nextkey : this.data.nextKey;
      this.setData({
        content: newData.discover ? newData.discover : this.data.content,
        banneritem: newData.cards ? newData.cards.slice(0, newData.cards.length - 1) : this.data.banneritem
      })
    },
    previewImage(e){
      console.log(e);
      let url = e.currentTarget.dataset.url
      wx.previewImage({
        current:url,
        urls: [url],
      })
    }
})

5.css

代码语言：javascript复制

.lazy-image{

}


/* 用户列表相关样式 */
.main{
	font-size:0;
	width:100%;
	height: 100%;
	font-family: 'PingFangSC-Semibold';
}
.title{
	text-align:center;
	font-size: 0;
}
.u_title{
	display: inline-block;
	width:100%;
	font-size: 24rpx;
	line-height: 24rpx;
	margin:20rpx 0;
	font-weight: bold;
}
.d_title{
	display: inline-block;
	width:100%;
	line-height: 22rpx;
	font-size: 22rpx;
}
.cardbox{
	width: 100%;
	font-size: 0;
	box-sizing: border-box;
	padding: 0 32rpx;
	/*margin-top:60rpx;*/
	display: inline-block;
}
button::after{
	border: none
}
button{
  width: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	background-color: #fff;
}
.card{
	display: inline-block;
	float:left;
	/* margin-top:60rpx; */
}
.card .image_card{
	width: 268rpx;
	height: 268rpx;
	border-radius: 8rpx;
	position: relative;
}
.cover{
	position: absolute;
	/* width: 327rpx;
	height: 327rpx; */
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.3);
	z-index: 99;
	border-radius: 8rpx;
}
.card .image_card .audience{
	font-size: 22rpx;
	color:#fff;
	position: absolute;
	left:16rpx;
	top:16rpx;
	z-index:999; 
	font-weight: bold;
}
.card .image_card .back{
	position: absolute;
	right:16rpx;
	top:16rpx;
	width: 56rpx;
	height: 32rpx;
	z-index: 999;
}
.card .user_card{
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	float:left;
	margin-right: 15rpx;
}
.card .user_card .avabox{
	width:48rpx;
	height: 48rpx;
	margin-right: 15rpx;
	position: relative;
	display: inline-block;
	vertical-align: middle;
}
.card .user_card .avabox .ava{
	width: 100%;
	height: 100%;
	border-radius: 8rpx;
	vertical-align: top
}
.card .user_card .avabox .vip{
	position: absolute;
	width: 32rpx;
	height: 32rpx;
	bottom:-5rpx;
	right:-5rpx;
	border-radius: 50%;
	background: red;
}
.card .user_name {
	width: auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: inline-block;
	font-size: 24rpx;
	text-align: start;
	display: inline-block;
	vertical-align: middle;
	font-weight: bold;
}
.card:nth-child(odd){
	margin-right:32rpx;
}
.showpic{
	width: 100%;
	height: 100%;
	border-radius: 8rpx;
	overflow: hidden;
}
.scroll-end{
	float: left;
	height: 50rpx;
	width: 100%;
	color: #999;
	line-height: 50rpx;
	font-size: 28rpx;
	text-align: center;
}

6.效果

npm javascript css

0 人点赞