图片懒加载 on 我的博客https://blog.suoyiran.tech/tags/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/Recent content from 我的博客Hugozh-CN本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！Sun, 10 Mar 2019 10:41:00 +0800图片懒加载组件https://blog.suoyiran.tech/post/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD%E7%BB%84%E4%BB%B6/Sun, 10 Mar 2019 10:41:00 +0800https://blog.suoyiran.tech/post/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD%E7%BB%84%E4%BB%B6/ 图片懒加载组件

作者：前端老李（）

代码片段地址

可直接点击链接在微信开发者工具上查看 https://developers.weixin.qq.com/s/JwRyKEmp7i5U

效果预览图

建议使用微信开发者工具直接打开上面的代码片段查看效果

起步

小程序图片的懒加载只能在page或scrollView中使用，通过阅读小程序api，发现一个createIntersectionObserver接口此处是介绍文档，他可以监听某个页面元素在视口的位置，这样我们就可以监听图片组件是否进入了用户视线中，进入之后再去加载网络图片，实现懒加载的功能。

本文2019-03-10首发于我的博客，最后修改于2019-03-10

]]>微信小程序