微信小程序开发中解决图片加载延迟的四种方法

实现加载延迟的方法

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

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

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

2：Intersection Observer API（正式案例）

WXML节点布局交集状态

• 节点布局API可用于监控交集状态API布局位置中的两个或多个组件节点。该 API 集通常可用于推断某些节点是否可供用户查看以及其中哪些节点可供用户查看。
• 涉及以下概念
  • 参考节点：监听参考节点以布局区域为参考区域。如果有多个参考节点，则将布局区域的交集作为参考区域。页面查看区域也可以作为参考区域之一。
  • 目标节点：默认监控目标只能是一个节点（使用selectAll选项时，可以同时监控多个节点）。
  • 交叉区域：目标节点布局区域与参考区域的交叉区域。
  • 相交比：相交面积与参考面积的比值。
  • 阈值：如果交集比达到阈值，就会触发监听回调函数。可能有几个阈值。 3 负载。查看了小程序官网API，可以通过在图片标签中添加lazy-load来实现延迟加载。但从微信的开发者工具来看，似乎并不适用。经过查找，好像很多朋友都遇到了这个问题，但都没有解决。

    但是经过验证，上传确实有效。

    不过小程序会先加载当前屏幕图片和下一个屏幕，所以不存在延迟加载。

    个人认为这种懒加载比传统的懒加载有更好的体验。 ？性能优化方法。简单来说，只有当图片出现在浏览器可见区域时，才设置图片的正确路径，这样图片才能显示出来。这是延迟加载图像。

    实现原理

    监听页面的滚动事件，判断元素到top的距离是否小于页面的值。可见页面高度

    法院逻辑代码如下

    ().top