vue2全局自定义指令实现图片懒加载

图片懒加载是指在页面滚动时，只加载当前可视区域内的图片，从而优化页面加载速度和性能。在Vue2中，我们可以通过全局自定义指令来实现图片懒加载。

首先，在Vue实例中定义一个全局指令v-lazy，用于处理图片的懒加载。代码如下：

Vue.directive('lazy', {
  inserted: function (el, binding) {
    let io = new IntersectionObserver((entries) => {
      let img = entries[0]
      if (img.isIntersecting) { // 判断图片是否进入可视区域
        el.src = binding.value // 给图片设置真实的src属性
        io.unobserve(el)
      }
    })
    io.observe(el)
  }
})

然后，在需要懒加载的图片上使用v-lazy指令，在src属性上绑定一个占位符，例如"loading.gif"。例如：

<img v-lazy="'http://example.com/image.jpg'" src="loading.gif">

在图片进入可视区域时，Intersection Observer会触发回调函数，将真实的图片路径赋值给图片的src属性，从而实现图片的懒加载。使用Intersection Observer可以更好地监听元素进入可视区域的事件，比传统的scroll事件更高效。

需要注意的是，为了实现图片懒加载，需要引入Intersection Observer的polyfill，以确保在不支持该API的浏览器上也能正常使用。

通过以上的步骤，我们就可以利用全局自定义指令v-lazy实现图片懒加载，提升页面加载速度和性能。