Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

使用window.$$createIntersectionObserver()页面报错异常错误 #472

Closed
1026203093 opened this issue Oct 26, 2023 · 0 comments
Closed

Comments

@1026203093
Copy link

1026203093 commented Oct 26, 2023

场景如下:
A页面中循环显示了一个组件B ,组件B是一个根据window.$$createIntersectionObserver()来懒加载图片,从小程序首页点击Icon进入A页面,页面的所有图片都能正常加载,没有任何报错。但是从A页面返回到首页,就会报错一个异常,不像是业务代码抛出的,不好定位。我感觉是因为IntersectionObserver导致的,但我在组件销毁前以及onhide。onunload都回调中都关闭的IntersectionObserver,麻烦看下这个报错是什么导致的。
组件B代码如下:

<template>
  <div class="myLazy_image">
    <div v-if="item.url != item.dataUrl" class="lazy_img_empty">
      <img
        style="opacity: 0;"
        :src="item.url"
        :data-url="item.dataUrl"
        class="img_none"
        :class="'lazyImage_item' + item.id"
        @load="handlerLoad"
      />
      <van-loading type="spinner" />
    </div>
    <img v-else :src="item.url" :data-url="item.dataUrl" />
  </div>
</template>

<script>
export default {
  name: "LazyImage",
  props: {
    imageInfo: Object,
    lazyLoadBottom: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      observer: null,
      item: {}
    };
  },

  mounted() {
    this.handler();
    window.addEventListener("wxhide", () => {
      if (this.observer) {
        this.clareOb();
      }
    });
    window.addEventListener("wxunload", () => {
      if (this.observer) {
        this.clareOb();
      }
    });
  },

  beforeDestroy() {
    if (this.observer) {
      this.observer.disconnect();
      this.observer = null;
    }
  },
  methods: {
    handlerLoad() {
      this.createObserver();
    },

    handler() {
      if (this.imageInfo?.url) {
        const iamgeInfo = JSON.parse(JSON.stringify(this.imageInfo));
        this.item = iamgeInfo;
      }
    },

    clareOb() {
      this.observer.disconnect();
      this.observer = null;
    },

    async createObserver() {
      let _this = this;
      let ob = window.$$createIntersectionObserver();
      ob.relativeToViewport({ bottom: this.lazyLoadBottom }).observe(
        `.h5-body >>> .lazyImage_item${_this.item.id}`,
        res => {
          const { intersectionRatio } = res;
          if (intersectionRatio > 0)
            if (_this.item.url === _this.item.dataUrl) return;
          _this.item.url = this.item.dataUrl;
          _this.observer = ob;
          _this.clareOb();
        }
      );
    }
  }
};
</script>

image

@1026203093 1026203093 closed this as not planned Won't fix, can't repro, duplicate, stale Oct 27, 2023
@1026203093 1026203093 reopened this Oct 27, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant