0

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

我创建了一个自定义指令并将其放在我的父 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>

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

4

1 回答 1

0

我认为您的问题与您设置的阈值有关。我推荐阅读：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.0 表示直到每个像素都可见时才认为已通过阈值。

于 2019-08-24T15:29:07.033 回答