在 VueJs 中应用交叉点观察器时的错误答案

【问题标题】：Bugs when applying intersection observer in VueJs在 VueJs 中应用交叉点观察器时的错误
【发布时间】：2019-08-24 15:21:35
【问题描述】：

我只想在用户看到我的图像或图像元素在用户视口中可见时才呈现我的图像。我已经试过了，但是只有当我已经传递了所有图像元素时才会渲染图像，而不是在滚动时一一呈现。

我创建了一个自定义指令并将其放在我的父 div 上。

这是我使用 Vue 指令的交叉点观察器：

inserted: el => {
  let arrayChildren = Array.from(el.children)

  const config = {
    root: null,
    rootMargin: '0px',
    threshold: 1.0,
  }

  let observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.src = entry.target.dataset.src
        observer.unobserve(entry.target)
      }
    })
  }, config)

  function getAllImgQuery() {
    let imageArray = []
    arrayChildren.forEach(element => {
      if (element.nodeName === 'IMG') {
        imageArray.push(element)
      }
    })
    return imageArray
  }

  let imageQuery = getAllImgQuery()

  imageQuery.forEach(image => {
    observer.observe(image)
  })
},

这是我的 Vue 组件：

<template>
  <div id="image-container">
    <div class="product">
      <figure class="image-wrapper" v-lazyload>
        <img :data-src="url" style="margin-top: 100px">
        <img :data-src="url" style="margin-top: 100px">
        <img :data-src="url" style="margin-top: 100px">
        <img :data-src="url" style="margin-top: 100px">
        <img :data-src="url" style="margin-top: 100px">
        <img :data-src="url" style="margin-top: 100px">
      </figure>
    </div>
  </div>
</template>

<script>
import lazyLoadDirective from "../directives/lazyLoadImage.js";

export default {
  data() {
    return {
      url:
        "https://s2.reutersmedia.net/resources/r/?m=02&d=20190823&t=2&i=1422065068&w=1200&r=LYNXNPEF7M1OI"
    };
  },
  directives: {
    lazyload: lazyLoadDirective
  }
};
</script>

最后，只有当我已经看到它或与它相交时（当我在页面底部时），这六个图像才会同时加载。我如何才能在滚动通过后一张一张地加载我的图片？

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component intersection-observer

【解决方案1】：

我认为您的问题与您设置的阈值有关。我推荐阅读：https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

门槛：

单个数字或数字数组表示什么观察者的回调应占目标可见性的百分比被执行。如果您只想检测能见度何时超过 50% 标记，您可以使用 0.5 的值。如果您希望回调运行每次能见度再超过 25%，您将指定数组 [0, 0.25, 0.5, 0.75, 1]。默认值为 0（意味着即使是 1 像素可见，回调将运行）。值为 1.0 意味着在每个像素都可见之前，不会认为阈值已通过。

【讨论】：

我认为不是。我尝试更改阈值，但它不起作用