Vue使用自定义指令创建图片懒加载以及获取图片错误时候显示默认失败图方法 v-LazyLoad

Vue使用自定义指令创建图片懒加载以及获取图片错误时候显示默认失败图方法 v-LazyLoad

注册一个懒加载并且加载失败时候显示默认error图片

1. 创建v-LazyLoad.js文件

/*
  注册一个自定义图片加载指令 v-LazyLoad
  功能：
    1. 实现懒加载，只加载浏览器可见区域的图片
    2. 实现加载失败时候显示默认error图片
*/
import Vue from "vue";
const defaultSrc = require("../assets/images/defaultImg.png")
const errorSrc = require("../assets/images/defaultImg.png")
const logoSrc = require("../assets/images/logo.jpg")
Vue.directive("LazyLoad", {
  bind(el, binding) {
    init(el, binding)
  },
  inserted(el, binding) {
    listenerScroll(el, binding)
  },
});

// 初始化
function init(el, binding) {
  el.setAttribute('data-src', binding.value); // 自定义属性保存 src 路径
  el.setAttribute('src', defaultSrc) // 加载默认图片
}
// 监听scroll事件
function listenerScroll(el, binding) {
  const handler = throttle(load, 300)
  load(el, binding)
  window.addEventListener('scroll', () => {
    handler(el, binding)
  })
}
// 加载真实图片
function load(el, binding) {
  const windowHeight = document.documentElement.clientHeight
  const elTop = el.getBoundingClientRect().top
  const elBtm = el.getBoundingClientRect().bottom
  if (elTop - windowHeight < 0 && elBtm > 0) {
    setImg(el, binding)
  }
}
// 节流
function throttle(fn, delay) {
  let timer
  let prevTime
  return function (...args) {
    const currTime = Date.now()
    const context = this
    if (!prevTime) prevTime = currTime
    clearTimeout(timer)

    if (currTime - prevTime > delay) {
      prevTime = currTime
      fn.apply(context, args)
      clearTimeout(timer)
      return
    }

    timer = setTimeout(function () {
      prevTime = Date.now()
      timer = null
      fn.apply(context, args)
    }, delay)
  }
}
// 图片加载处理
function setImg(el, binding) {
  const loadTrue = el.dataset.load;
  if (loadTrue) return // 判断是否已经加载过了
  const realSrc = el.dataset.src;
  el.removeAttribute('data-src') // 移除自定义属性
  el.setAttribute('data-load', true); // 添加Load自定义属性
  let type = binding.arg || "error";
  let errorImg = {
    error: errorSrc,
    logo: logoSrc,
  }
  if (!realSrc) return el.src = defaultSrc;

  let img = new Image();
  img.src = realSrc;
  img.onload = function () {
    el.src = realSrc;
    img = img.onload = null;
  };
  img.onerror = function () {
    el.src = errorImg[type];
    img = img.onerror = null;
  };
}

2. 引入v-LazyLoad

//  main.js 根据文件的相关路径引入v-load.js文件
import "xx/v-LazyLoad.js"; // v-load 指令

3. 在标签使用v-LazyLoad

 <img v-LazyLoad="图片" alt="" /> <!-- 默认等于  v-load:error -->
 <img v-LazyLoad:logo="图片" alt="" />