利用IntersectionObserver监听图片是否在当前视窗内

created() {
    let options = {
      root: null,
      rootMargin: "0px",
      threshold: [0, 0.8],
    };
    this.intersectionObserver = new window.IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.target === this.computerObserveTarget) {
        /*isIntersecting (en-US) 的属性值来判断 target 元素在 root 元素中的可见性是否发生变化。如果 isIntersecting 为真，target 元素的至少已经达到 thresholds 属性值当中规定的其中一个阈值，如果为假，则 target 元素不在给定的阈值范围内可见*/
          if (entry.isIntersecting && entry.intersectionRatio > 0.7) {
            this.computerImage.classList.add("settled");
          } else if (!entry.isIntersecting && entry.intersectionRatio < 0.2) {
            this.computerImage.classList.remove("settled");
          }
        } else if (entry.target === this.bgCon2) {
          if (entry.isIntersecting && entry.intersectionRatio > 0.7) {
            this.samJZ.classList.add("settled");
          } else if (!entry.isIntersecting && entry.intersectionRatio <= 0.2) {
            this.samJZ.classList.remove("settled");
          }
        }
      });
    }, options);
  },

<div class="bg-con-2" v-element-init="initBgCon2"></div>

initBgCon2(element) {
      this.bgCon2 = element;
      this.intersectionObserver.observe(this.bgCon2);
    }
    ,