小程序图片懒加载终极方案 |
您所在的位置：网站首页 › 图片懒加载原理 › 小程序图片懒加载终极方案 |
小程序图片懒加载终极方案
|
效果图 既然来了，把妹子都给你。
懒加载，前端人都知道的一种性能优化方式，简单的来说，只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。 实现原理监听页面的scroll事件,判读元素距离页面的top值是否是小于等于页面的可视高度 判断逻辑代码如下 element.getBoundingClientRect().top { console.log(ret) }).exec() 显示结果如下
悄悄告诉你，小程序里面有个onPageScroll函数，是用来监听页面的滚动的。 还有个getSystemInfo函数，可以获取获取系统信息，里面包含屏幕的高度。 接下来，思路就透彻了吧。还是上面的逻辑， 扒拉扒拉直接写代码就行了,这里只写下主要的逻辑，完整代码请戳文末github showImg(){ let group = this.data.group let height = this.data.height // 页面的可视高度 wx.createSelectorQuery().selectAll('.item').boundingClientRect((ret) => { ret.forEach((item, index) => { if (item.top { console.log('监听box组件触发的函数') }) 2、 wx.createIntersectionObserver().relativeTo('.box').observer('.item', (result) => { console.log('监听item组件触发的函数') }) 3、 wx.createIntersectionObserver().relativeToViewport().observer('.box', (result) => { if(result.intersectionRatio > 0){ console.log('.box组件是可见的') } })duang，揭晓答案。 第一个以当前页面的视窗监听了.box组件，log会触发两次，一次是进入页面一次是离开页面 第二个以.box节点的布局区域监听了.item组件，log会触发两次，一次是进入页面一次是离开页面 第三个以当前页面的视窗监听了.box组件，log只会在节点可见的时候触发 好了，题也做了，API你也掌握了，相信你已经可以使用IntersectionObserver来实现图片懒加载了吧，主要逻辑如下 let group = this.data.group // 获取图片数组数据 for (let i in this.data.group){ wx.createIntersectionObserver().relativeToViewport().observe('.item-'+ i, (ret) => { if (ret.intersectionRatio > 0){ group[i].show = true } this.setData({ group }) }) }最后 至此，我们使用两种方式实现了小程序版本的图片懒加载，可以发现，使用IntersectionObserver来实现不要太酸爽 |
【本文地址】