解决微信小程序图片延迟加载（四种方法）

实现延迟加载的方法

1：通过监听滚动条滑动事件，判断元素距离页面顶部的距离是否小于等于页面的可视高度

Page({data: {realScrollTop: 0,//页面滚动距离driveHeight　　　//屏幕高度可初始化设置
},
scroll(e){if(e.detail.scrollTop > this.data.realScrollTop){this.setData({realScrollTop: e.detail.scrollTop});}}
});

<scroll-view scroll-y="true" scroll-top="{{resetScrollTop}}" bindscroll="scroll" ><image wx:if="{{realScrollTop+driveHeight*2 > (index*70)}}" src="{{item['img']}}"></image>　　<image wx:else src="{{item['bgm']}}"></image>
</scroll-view>

2：Intersection Observer API(官方案例)

WXML节点布局相交状态

节点布局交叉状态API可用于监听两个或多个组件节点在布局位置上的相交状态。这一组API常常可以用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。
涉及到以下几个概念
- 参照节点：监听的参照节点，取它的布局区域作为参照区域。如果有多个参照节点，则会取它们布局区域的交集作为参照区域。页面显示区域也可作为参照区域之一。
- 目标节点：监听的目标，默认只能是一个节点（使用 selectAll 选项时，可以同时监听多个节点）。
- 相交区域：目标节点的布局区域与参照区域的相交区域。
- 相交比例：相交区域占参照区域的比例。
- 阈值：相交比例如果达到阈值，则会触发监听器的回调函数。阈值可以有多个。

<scroll-view><view class="image-panel item item-{{index}}" wx:for="{{list}}" wx:for-item="item" wx:key="{{index}}"><view class="video-play" bindtap="linkToDetail"><image class="{{item.show ? 'active': ''}}" src="{{item.show ? item.cover : default}}" mode="widthFix" lazy-load /></view></view></scroll-view>

 const url = "";//业务api地址const that = this;const obj = {method: 'get',url: url,success: function (res) {var items = res.data.items;that.setData({list: items})setTimeout(() => {for (let i in res.data.items) {wx.createIntersectionObserver().relativeToViewport({bottom: 20}).observe('.item-' + i, (res) => {if (res.intersectionRatio > 0) {items[i].show = true}that.setData({list: items})})}}, 1*1000);}}common.httpRequest(obj)

3:image标签里的lazy-load属性

最近在开发家里喵喵的小程序（娱乐），本想抽一小部分时间做个懒加载。看了小程序官网 API，给 image 标签加上 lazy-load 就能实现懒加载。但从微信开发者工具看，似乎并没有生效。搜了一下，很多小伙伴似乎都遇到了问题，并没有解决。

但经过我的验证， 懒加载确实是生效了 。

只不过，小程序会提前加载当前屏幕和下一屏的图片，导致感知不到懒加载的存在。

个人认为，这样的懒加载比传统懒加载的体验更加好。

我的验证过程：

wxml部分（用 scroll-view 并且加上 bindload）：

<scroll-view class="container" scroll-y>  <view wx:for="{{list}}" class="list-item"> <image class="list-img" lazy-load src="{{item.img}}" bindload='onLazyLoad'></image><view>{{item.desc}}</view></view>
</scroll-view>

js部分：

const app = getApp()
Page({  data: {list: []},onLazyLoad(info) {console.log(info)}
})

4：

定义

懒加载，前端人都知道的一种性能优化方式，简单的来说，只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。

实现原理

监听页面的scroll事件,判读元素距离页面的top值是否是小于等于页面的可视高度

判断逻辑代码如下

element.getBoundingClientRect().top <= document.documentElement.clientHeight ? 显示 : 默认

我们知道小程序页面的脚本逻辑是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能在脚本中使用window，也无法在脚本中操作组件。

所以关于图片懒加载就需要在数据上面做文章了。

页面

页面上面只需要根据数据的某一个字段来判断是否显示图片就可以了，字段为Boolean类型，当为false的时候显示默认图片就行了。

代码大概长成这样

<view wx:for="{{list}}" class='item item-{{index}}'wx:key="{{index}}"><image class="{{item.show ? 'active': ''}}" src="{{item.show ? item.src : item.def}}"></image>
</view>

布局跟简单，view组件里面有个图片，并循环list，有多少就展示多少

image组件的src字段通过每一项的show来进行绑定，active是加了个透明的过渡

样式

image{transition: all .3s ease;opacity: 0;
}
.active{opacity: 1;
}

逻辑

本位主要讲解懒加载，所以把数据写死在页面上了

数据结构如下：

我们使用两种方式来实现懒加载，准备好没有，一起来快乐的撸码吧。

WXML节点信息

小程序支持调用createSelectQuery创建一个SelectorQuery实例，并使用select方法来选择节点，并通过boundingClientRect来获取节点信息。

wx.createSelectorQuery().select('.item').boundingClientRect((ret)=>{console.log(ret)
}).exec()

显示结果如下

悄悄告诉你，小程序里面有个onPageScroll函数，是用来监听页面的滚动的。
还有个getSystemInfo函数，可以获取获取系统信息，里面包含屏幕的高度。

接下来，思路就透彻了吧。还是上面的逻辑，扒拉扒拉直接写代码就行了,这里只写下主要的逻辑，完整代码请戳文末github

showImg(){let group = this.data.grouplet height = this.data.height  // 页面的可视高度wx.createSelectorQuery().selectAll('.item').boundingClientRect((ret) => {ret.forEach((item, index) => {if (item.top <= height) { 判断是否在显示范围内group[index].show = true // 根据下标改变状态}})this.setData({group})}).exec()}
onPageScroll(){ // 滚动事件 this.showImg()
}

解决微信小程序图片延迟加载（四种方法）相关推荐

微信小程序开发的四种文件
最近在弄一个微信小程序,将看到的内容记录一下: 微信小程序中就四种类型的文件: js ---------- JavaScrip文件 json -------- 项目配置文件,负责窗口颜色等等 wxml ...
微信小程序路由的三种方法
wx.navigateTo(Object object) 保留当前页面,跳转到应用内的某个页面.但是不能跳到 tabbar 页面.使用 wx.navigateBack 可以返回到原页面. wx.swi ...
学习记录——微信小程序查询的两种方法
1 传统的查询写法 Page({data:{list:[]},onLoad(){let that=thiswx.cloud.database().collection('goods').get({// ...
微信小程序图片无法存入云开发数据库，求解决
微信小程序图片无法存入云开发数据库,求解决上传图片的js代码片段上传图片的js代码片段上传图片的js代码片段,觉得自己代码的没错,也能打印出来上传的图片地址,但是发现并没有存进数据库,求大神指点 ...
详解 - 解决微信小程序分享功能图片比例问题 - 全局分享
前言: 我在我的博客小程序使用微信小程序分享功能图片不符合5:4问题 ,对其原理扫描下面二维码,可以体验哦准备在需要自定义分享的页面设置canvas 组件目录准备详解思路定义总函数 ...
微信小程序图片全屏预览组件，并解决svg真机显示黑屏问题
自己码了个微信小程序图片全屏预览组件,并解决了svg真机显示黑屏问题(即png等格式可以正常显示,但就svg无法显示). /*** 微信小程序图片预览组件* 1.支持预览svg.png.jpeg.jp ...
解决微信小程序安卓手机访问不到图片，无法显示图片
关于微信小程序不显示图片通病可能有以下几个可能性: 非本地图片:确定图片资源存在,copy 图片url再浏览器打开,确定图片资源存在且能正常访问本地图片:确定相对路径或者绝对路径正确微信小程序图 ...
java监听微信_一种基于java后台应用监控微信小程序的用户访问量的方法与流程...
本发明涉及java应用与微信小程序应用开发技术领域,具体涉及一种基于java后台应用监控微信小程序的用户访问量的方法. 背景技术: 微信小程序,简称小程序,是一种不需要下载安装即可使用的应用,它实现了 ...
微信小程序开发的三种模式
摘要:截止到2018年6月底,正式上线发布的微信小程序已超过100万个.而越来越多的公司也已经在做微信小程序开发,许多人会觉得"微信小程序开发是开发者们的专利".答案是否定的,今天 ...

解决微信小程序图片延迟加载（四种方法）

定义

实现原理

页面

解决微信小程序图片延迟加载（四种方法）相关推荐

最新文章

热门文章