微信小程序image标签lazy-load属性和hidden属性冲突问题

问题现象

在某些未知的情况下，微信小程序 image 标签在存在 lazy-load 属性时的 bindload 方法不会触发（非必现）

示例代码

<view>
  <image
    src="{{url}}"
    lazy-load
    bindload="imgLoad"
    hidden="{{loading}}"
  ></image>
  <button bindtap="changeImg">切换图片</button>
</view>

Page({
  data: {
    loading: false,
    url: "",
  },
  onLoad() {
    setTimeout(() => {
      this.setData({
        url: "https://www.wobushi.top/img/bg/vdysjx.webp",
      });
    }, 1000);
  },
  changeImg() {
    this.setData({
      loading: true,
      url: "https://www.wobushi.top/img/default.png",
    });
  },
  imgLoad() {
    this.setData({
      loading: false,
    });
  },
});

原因分析

通过日志分析发现当图片无法展示时，即使给 image 标签赋值了 src 属性，也不会发送图片请求。

观察代码发现可能导致图片不加载的原因可能是 lazy-load 和 hidden 属性冲突导致，当 changeImg 函数修改 url 时，loading 置为 true，此时图片处于 hidden 状态，导致触发了 lazy-load 的机制认为图片不需要展示，所以就不会加载，也不会触发 load 回调，这样就进入了无法加载图片的死循环。

疑惑点

1. 该问题并不是必现，甚至后续通过编写小程序代码片段也无法重现。
2. 线上出现问题的小程序长按删除后重新打开就能恢复正常
3. 调试工具无法重现，真机调试也只有部分设备可以重现

优化建议

尽量避免 lazy-load 和 hidden 属性同时使用，如果需要使用 lazy-load，需要对场景进行分析判断是否真的需要懒加载，而不是无脑加上这个属性。