虽然微信小程序自己的image组件中有懒加载属性，但是根据文档的说明：image组件的lazy-load懒加载属性将在图片在即将进入一定范围（上下三屏）时才开始加载。感觉懒加载效果不怎么明显。那这次将用另外一种方法来实现图片的懒加载。

1.相关的API

IntersectionObserver 对象，用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。
其中有一个API，用于监听指定对象与显示区域为参照区域的相交状态变化情况：IntersectionObserver.relativeToViewport(Object margins)，简洁的说明就是：指定某个对象，如果该对象在滚动的时候出现在显示区域（与显示区域相交），则调用方法。

2.布局

<template><view class='bg_div'><view class="ball"><image src="../images/bar_1.png" wx:if="{{isShow}}" /></view></view>
</template><style lang='scss'>.bg_div{width:100%;height:300%;display:flex;justify-content:center;align-items:center;.ball{width:300rpx;height:300rpx;border-radius:150rpx;background:#f5f5f5;display:flex;justify-content:center;align-items:center;image{width:70rpx;height:70rpx;}}}
</style>

根据这个布局，现在只需要控制isShow，未在显示区域事isShow为false,在class为ball的这个view,即将滚动到显示区域的赋值为true,就能实现懒加载。因此，可以使用方法：IntersectionObserver.relativeToViewport(Object margins)来监听.ball与显示区域的相交情况来实现。

3.加载监听方法

<script>
import wepy from 'wepy'
export default class FirstPage extends wepy.page{data = {isShow:false}onLoad(){this.lazyLoad();}lazyLoad(){wx.createIntersectionObserver().relativeToViewport({bottom:0}).observe('.ball',(ret)=>{if(ret.intersectionRatio > 0){this.isShow = true;console.log('显示',ret.intersectionRatio);}this.$apply();});}
}
</script>

在页面加载时创建监听，监听ball与显示区域的相交情况，当相交的时候，会调用方法。（默认创建的IntersectionObserver 对象实例的属性，阈值为0，相当于相交比例达到该阈值时将调用方法），因此当ball将要显示时（与显示区域相交），将isShow赋值为true,那图片将显示，因此实现图片的懒加载。

4.相关文档

image组件官方文档
IntersectionObserver 文档

微信小程序图片懒加载相关推荐

微信小程序--图片懒加载
定义图片懒加载又称图片延时加载.惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力.惰性加载是程序人性化的一种体现,提高用户体验,防止 ...
【愚公系列】2022年09月微信小程序-图片懒加载功能实现
文章目录前言一.官方图片的懒加载 1.wxml 2.js 3.css 4.效果二.第三方包实现图片的懒加载 1.安装第三方包 2.组件引用 3.wxml 4.js 5.css 6.效果前言大 ...
微信小程序图片懒加载实现
使用微信提供的 IntersectionObserver 对象 IntersectionObserver 对象,用于推断某些节点是否可以被用户看见.有多大比例可以被用户看见. 在页面渲染开始时,通过这 ...
微信小程序封装懒加载图片
微信小程序封装懒加载图片 js /components/LazyImage/index.js // components/LazyImage/index.js Component({/*** 组件的属 ...
小程序图片懒加载较完美解决方案
无需考虑数据结构,效果如图话不多说,先上代码 wxml <view class="content"><block wx:key="{{img}}&qu ...
微信小程序图片的加载
在微信小程序中,要显示一张图片,有两种图片加载方式: 加载本地图片 <image class="widget__arrow" src="/image/.png&qu ...
微信小程序——图片的加载与获取手机内部的图片
关于将手机里的图片放在上传到小程序,在小程序里这种方法并不陌生,甚至大多数小程序都附带有这种功能,那么这种功能是怎么实现的呢,一起来看看吧!!! 1.微信小程序加载图片的几种方法 1.本地图片的加载 ...
微信小程序 # 图片预加载方案(防闪烁) 以及首次引导
问题背景第一次进入小程序的时候,需要打开引导操作点击进入下一个引导操作,一共有一系列引导操作. 引导操作这里是用图片实现的,然后点一下切换一张图片. 问题具体描述在如上图所示的引导提示操作中,用 ...
小程序图片懒加载放在服务器,【小程序】使用uni-app搭建小程序环境---图片懒加载...
延迟加载的理念:页面初始化时,暂不加载处于屏幕可见区域之外的图片.该方案会有如下几大好处:\n加快页面渲染速度 \n提升页面滚动性能 \n默认不下载屏幕外的图片,减少网络流量主标题列表二级标题 e ...
今天突然发现，微信小程序手机访问正常，PC端访问小程序图片无法加载？
今天突然发现,微信小程序手机访问正常,PC端访问小程序图片无法加载? 所有图片在pc上查看都无法显示. 然后使用抓包工具抓包,pc端图片全部403,结果为 AccessDenied You are d ...

微信小程序图片懒加载

1.相关的API

2.布局

3.加载监听方法

4.相关文档

微信小程序图片懒加载相关推荐

最新文章

热门文章

微信小程序 图片懒加载

1.相关的API

2.布局

3.加载监听方法

4.相关文档

微信小程序 图片懒加载相关推荐

最新文章

热门文章

微信小程序图片懒加载

微信小程序图片懒加载相关推荐