文章目录

  • 前言
  • 一、官方图片的懒加载
    • 1.wxml
    • 2.js
    • 3.css
    • 4.效果
  • 二、第三方包实现图片的懒加载
    • 1.安装第三方包
    • 2.组件引用
    • 3.wxml
    • 4.js
    • 5.css
    • 6.效果

前言

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

一、官方图片的懒加载

相关图片的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"><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.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><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="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.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.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><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="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.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.效果

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

  1. 【愚公系列】2022年09月 微信小程序-图片加载和全屏适配问题

    文章目录 前言 一.图片加载 二.适配机型实现全屏背景图 前言 在使用图片问题中可能会遇到各种各样的问题,比如图片加载不出来,图片显示在不同机型效果不同,图片加载展示问题等等. 微信小程序image相 ...

  2. 微信小程序--图片懒加载

    定义 图片懒加载又称图片延时加载.惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力.惰性加载是程序人性化的一种体现,提高用户体验,防止 ...

  3. 微信小程序图片懒加载实现

    使用微信提供的 IntersectionObserver 对象 IntersectionObserver 对象,用于推断某些节点是否可以被用户看见.有多大比例可以被用户看见. 在页面渲染开始时,通过这 ...

  4. 微信小程序封装懒加载图片

    微信小程序封装懒加载图片 js /components/LazyImage/index.js // components/LazyImage/index.js Component({/*** 组件的属 ...

  5. 【愚公系列】2022年09月 微信小程序-微信小程序实现网页一键登录功能

    文章目录 前言 一.微信小程序实现网页一键登录功能 1.旧版登录方法 2.新版登录方法 二.相关第三方包源码 前言 如果微信小程序要获取微信登录的用户信息,需要拿到code去后台换取用户信息,具体步骤 ...

  6. 【愚公系列】2022年09月 微信小程序-webview内嵌网页的授权认证

    文章目录 前言 一.webview内嵌网页的授权认证 1.内嵌页面 2.登录页面 二.web端相关函数 1.判断是否是小程序环境 前言 随着微信小程序的广泛应用,小程序的用户越来越多,但受其小程序体积 ...

  7. 【愚公系列】2022年09月 微信小程序-自定义导航栏功能的实现

    文章目录 前言 一.自定义导航栏功能的实现 1.组件的封装 2.使用 前言 导航栏是指位于页面顶部或者侧边区域的,在页眉横幅图片上边或下边的一排水平导航按钮,它起着链接站点或者软件内的各个页面的作用. ...

  8. 微信小程序图片的加载

    在微信小程序中,要显示一张图片,有两种图片加载方式: 加载本地图片 <image class="widget__arrow" src="/image/.png&qu ...

  9. 微信小程序——图片的加载与获取手机内部的图片

    关于将手机里的图片放在上传到小程序,在小程序里这种方法并不陌生,甚至大多数小程序都附带有这种功能,那么这种功能是怎么实现的呢,一起来看看吧!!! 1.微信小程序加载图片的几种方法 1.本地图片的加载 ...

最新文章

  1. RenderTextureFormat.ShadowMap
  2. 3.5 将 Batch 拟合进神经网络-深度学习第二课《改善深层神经网络》-Stanford吴恩达教授
  3. 成功解决If your current network has https://www.anaconda.com blocked, please filea support request with
  4. 在Spring中使用jOOQ：CRUD
  5. 【2015年第4期】大数据引领教育未来：从成绩预测谈起
  6. 把字母排序ASC表c语言,c语言ASCII码排序
  7. 深入HashCode方法
  8. python3之udp
  9. python菜鸟教程 pdf-菜鸟教程 python pdf/Python菜鸟教程怎么样
  10. flashfxp链接不上，flashfxp链接不上是因为什么
  11. matlab泊松分布图,将泊松分布拟合到MATLAB中的一组数据
  12. sonic 架构学习
  13. 电脑主板线路连接图解_机箱线怎么接主板 DIY电脑机箱跳线与主板连接图解(2)...
  14. 云呐|动环监控设备维护与常见故障处理
  15. 绿色便携版谷歌浏览器制作流程
  16. 上微信怎么同时用计算机,电脑端微信双开，教你两种简单的方法，上手即用！...
  17. 浏览器推荐-以Windows操作系统为例
  18. Python商品数据预处理与K-Means聚类可视化分析
  19. 谷歌自动翻译-谷歌翻译api怎样能打开网页默认自动翻译
  20. 计算机一些专业术语,计算机知识专业术语50个

热门文章

  1. Unity 3D Text字迹模糊问题的解决方法
  2. 零碎知识——统计相关
  3. Smark.Data实体默认值描述
  4. 2022年6月11日（星期六）:骑行哈尼部落
  5. qt通过QComboBox实现文本框自动记忆、补全和下拉选项填写
  6. 通过前缀树的敏感词过滤算法
  7. 资产折旧期间日志表TABA
  8. PAT1018 锤子剪刀布（满分20 得10分）
  9. java中p_javap的基本用法
  10. 小陈学习JS 练习1判断时间阶段。比如用户输入12点弹出 中午好用户输入18点弹出傍晚好用户输入23点弹出深夜好