<template>
  <div class="app">
    <div class="top">fjdskla</div>
    <div><img v-lazy src="../static/image/left.jpg" alt="img" /></div>
    <div><img v-lazy src="../static/image/left.png" alt="img" /></div>
    <div><img v-lazy src="../static/image/left.jpg" alt="img" /></div>
    <div><img v-lazy src="../static/image/left.png" alt="img" /></div>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  created() {},
  mounted() {},
  methods: {},
}
</script>
<style scoped lang="scss">
.app {
  .top {
    height: 2000px;
    width: 100%;
    background-color: beige;
  }
  div {
    margin-top: 50px;
  }
}
</style>

// 定義懶加載圖片或者文件等，自定義指令
Vue.directive('lazy', (el, binding) => {
  let oldSrc = el.src //保存舊的src，方便后期渲染時候賦值src真實路徑
  el.src = "" //將渲染的src賦為空，則不會渲染圖片出來
  let observer = new IntersectionObserver(([{ isIntersecting }]) => { // 調(diào)用方法得到該elDOM元素是否處于可視區(qū)域
    if (isIntersecting) { //回調(diào)是否處于可視區(qū)域，true or false
      el.src = oldSrc //如果處于可視區(qū)域額，將最開始保存的真實路徑賦予DOM元素渲染
      observer.unobserve(el) // 只需要監(jiān)聽一次即可，第二次滑動到可視區(qū)域時候不在監(jiān)聽
    }
  })
  observer.observe(el) // 調(diào)用方法
})