文章目录

前言一、官方图片的懒加载1.wxml2.js3.css4.效果 二、第三方包实现图片的懒加载1.安装第三方包2.组件引用3.wxml4.js5.css6.效果

前言

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

一、官方图片的懒加载

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

1.wxml

<view class="page-section"><text class="page-section__title">use image</text><scroll-view class="cardbox"><buttonwx: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..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="/upload/resource/9e7ca7ece11143b49fc952cfb2520e43.png" /></view><text class="user_name">{{item.live.user_info.name}}</text></view></button><buttonwx: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="/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="/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: '/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.urlwx.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"><buttonwx: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..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="/upload/resource/9e7ca7ece11143b49fc952cfb2520e43.png" /></view><text class="user_name">{{item.live.user_info.name}}</text></view></button><buttonwx: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="/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="/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: '/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.urlwx.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.效果