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

举报
愚公搬代码 发表于 2022/09/30 22:23:17 2022/09/30
【摘要】 前言大型电商，一个页面会存在非常多的图片，一次性加载图片会很慢，用户体验度不好，而图片懒加载是为了提这些网页的打开的速度，获得更好用户体验的一种手段。其选择的重要的部分先加载，次要的部分需要的时候再加载。 一、官方图片的懒加载相关图片的API和简单案例可参考：https://codeboy.blog.csdn.net/article/details/123921262 1.wxml<vie...

前言

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

一、官方图片的懒加载

相关图片的API和简单案例可参考：https://codeboy.blog.csdn.net/article/details/123921262

1.wxml

<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

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

.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.组件引用

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

3.wxml


<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

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

.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.效果

在这里插入图片描述

【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
小程序
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入