import Vue from "vue";
const eventBus = new Vue({});
/*
 * 事件名：mainScroll
 * 含義：主區(qū)域滾動條位置變化后觸發(fā)
 * 參數(shù)：
 * - 滾動的dom元素，如果是undefined，則表示dom元素已經(jīng)不存在
 */
//在Vue.prototype原型上注冊事件總線，方便vue實例對象監(jiān)聽和觸發(fā)
Vue.prototype.$bus = eventBus;
//導(dǎo)出事件總線，方便在其他js模塊監(jiān)聽和觸發(fā)事件總線上的事件
export default eventBus;

import Vue from "vue";
import App from "./App.vue";
import "./eventBus"; //引入事件總線
import vLazy from "./directives/lazy";
Vue.directive("lazy", vLazy); //全局注冊指令
new Vue({
  render: (h) => h(App),
}).$mount("#app");

<template>
  <div class="container">
    <ul>
      <li v-for="img in imgs" :key="img.id">
        <img v-lazy="img.src" :alt="img.alt" :title="img.title" />
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgs: [
        {
          id: "",
          src: "",
          alt: "",
          title: "",
        },
      ],
    };
  },
  //下面的代碼可以用組件混入來進(jìn)行封裝，從而優(yōu)化代碼結(jié)構(gòu)
  methods: {
    //觸發(fā)mainScroll事件
    handleMainScroll() {
      this.$bus.$emit("mainScroll", this.$refs.container);
    },
  },
  mounted() {
    //監(jiān)聽滾輪事件
    this.$refs.container.addEventListener("scroll", this.handleMainScroll);
  },
  beforeDestroy() {
    this.$bus.$emit("mainScroll");//參數(shù)傳入undefined，表示dom元素已經(jīng)不存在
    //取消監(jiān)聽滾輪事件
    this.$refs.container.removeEventListener("scroll", this.handleMainScroll);
  },
};
</script>

/**
 * @param {Function} fn 需要進(jìn)行防抖操作的事件函數(shù)
 * @param {Number} duration 間隔時間
 * @returns {Function} 已進(jìn)行防抖的函數(shù)
 */
export default function (fn, duration = 100) {
  let timer = null;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn(...args);
    }, duration);
  };
}

import eventBus from "@/eventBus"; //引入事件總線
import { debounce } from "@/utils"; //引入函數(shù)防抖工具函數(shù)
// 調(diào)用setImages函數(shù)，就可以處理那些符合條件的圖片
function setImages() {}
//監(jiān)聽事件總線中的mainScroll事件，該事件觸發(fā)時調(diào)用setImages函數(shù)來加載圖片
eventBus.$on("mainScroll", debounce(setImages, 50));

import eventBus from "@/eventBus"; //引入事件總線
import { debounce } from "@/utils"; //引入函數(shù)防抖工具函數(shù)
// 調(diào)用setImages函數(shù)，就可以處理那些符合條件的圖片
function setImages() {}
//監(jiān)聽事件總線中的mainScroll事件，該事件觸發(fā)時調(diào)用setImages函數(shù)來加載圖片
eventBus.$on("mainScroll", debounce(setImages, 50));
//上面代碼是3.1 如何監(jiān)聽容器的滾動條的滾動？
//下面代碼是3.2 使用自定義指令哪些鉤子函數(shù)？
let imgs = []; //存儲收集到的的圖片信息 當(dāng)圖片加載好后刪除該圖片信息
//調(diào)用setImage函數(shù)，就可以進(jìn)行單張圖片的加載
function setImage(img) {}
export default {
  inserted(el, bindings) {
    //剛插入父節(jié)點時 收集img節(jié)點信息
    const img = {
      dom: el, //img 元素DOM節(jié)點
      src: bindings.value, //img的src屬性值
    };
    imgs.push(img); //先將圖片信息存儲到imgs數(shù)組
    setImage(img); // 立即判斷該圖片是否要加載
  },
  unbind(el) {
    //解綁時 刪除 imgs 中的所有圖片信息
    imgs = imgs.filter((img) => img.dom !== el);
  },
};

import eventBus from "@/eventBus"; //引入事件總線
import { debounce } from "@/utils"; //引入函數(shù)防抖工具函數(shù)
let imgs = []; //存儲收集到的的圖片信息
// 調(diào)用setImages函數(shù)，就可以處理那些符合條件的圖片
function setImages() {
  for (const img of imgs) {
    setImage(img); // 處理該圖片
  }
}
//監(jiān)聽事件總線中的mainScroll事件，該事件觸發(fā)時調(diào)用setImages函數(shù)來加載符合條件圖片
eventBus.$on("mainScroll", debounce(setImages, 50));
//當(dāng)圖片加載好后刪除該圖片信息
export default {
  inserted(el, bindings) {
    //剛插入父節(jié)點時 收集img節(jié)點信息
    const img = {
      dom: el, //img 元素DOM節(jié)點
      src: bindings.value, //img的src屬性值
    };
    imgs.push(img); //先將圖片信息存儲到imgs數(shù)組
    setImage(img); // 立即判斷該圖片是否要加載
  },
  unbind(el) {
    //解綁時 刪除 imgs 中的所有圖片信息
    imgs = imgs.filter((img) => img.dom !== el);
  },
};
//上面代碼是3.1 如何監(jiān)聽容器的滾動條的滾動？+ 3.2 使用自定義指令哪些鉤子函數(shù)？
//下面代碼是3.3 如何判斷圖片 img 元素是否在用戶的可見范圍內(nèi)？
//調(diào)用setImage函數(shù)，就可以進(jìn)行單張圖片的加載
function setImage(img) {
  const clientHeight = document.documentElement.clientHeight; //視口高度
  const rect = img.dom.getBoundingClientRect(); //圖片的位置信息
  //取默認(rèn)值150 是為了解決圖片未加載成功時高度缺失的問題
  const height = rect.height || 150; //圖片的高度
  // 判斷該圖片是否在視口范圍內(nèi)
  if (rect.top >= -height && rect.top <= clientHeight) {
    // 在視口范圍內(nèi) 進(jìn)行相關(guān)處理操作
  } else {
    // 不在視口范圍內(nèi) 不進(jìn)行操作
  }
}

import eventBus from "@/eventBus"; //引入事件總線
import { debounce } from "@/utils"; //引入函數(shù)防抖工具函數(shù)
import defaultGif from "@/assets/default.gif"; //在assets靜態(tài)文件夾下放入默認(rèn)圖
let imgs = []; //存儲收集到的且未加載的圖片信息
//調(diào)用setImage函數(shù)，就可以進(jìn)行單張圖片的加載
function setImage(img) {
  img.dom.src = defaultGif; // 先暫時使用默認(rèn)圖片
  const clientHeight = document.documentElement.clientHeight; //視口高度
  const rect = img.dom.getBoundingClientRect(); //圖片的位置信息
  //取默認(rèn)值150 是為了解決圖片未加載成功時 高度缺失的問題
  const height = rect.height || 150; //圖片的高度
  // 判斷該圖片是否在視口范圍內(nèi)
  if (-rect.top <= height && rect.top <= clientHeight) {
    // 在視口范圍內(nèi) 進(jìn)行相關(guān)處理操作
    const tempImg = new Image(); //新建Image對象實例
    //改寫onload事件
    tempImg.onload = function () {
      // 當(dāng)圖片加載完成之后
      img.dom.src = img.src; //替換img元素的src屬性
    };
    tempImg.src = img.src;
    imgs = imgs.filter((i) => i !== img); //將已加載好的圖片進(jìn)行刪除
  }
}
// 調(diào)用setImages函數(shù)，就可以處理那些符合條件的圖片
function setImages() {
  for (const img of imgs) {
    setImage(img); // 處理該圖片
  }
}
//監(jiān)聽事件總線中的mainScroll事件，該事件觸發(fā)時調(diào)用setImages函數(shù)來加載符合條件圖片
eventBus.$on("mainScroll", debounce(setImages, 50));
//當(dāng)圖片加載好后刪除該圖片信息
export default {
  inserted(el, bindings) {
    //剛插入父節(jié)點時 收集img節(jié)點信息
    const img = {
      dom: el, //img 元素DOM節(jié)點
      src: bindings.value, //img的src屬性值
    };
    imgs.push(img); //先將圖片信息存儲到imgs數(shù)組
    setImage(img); // 立即判斷該圖片是否要加載
  },
  unbind(el) {
    //解綁時 清空 imgs
    imgs = imgs.filter((img) => img.dom !== el);
  },
};