vue图片懒加载。

自己做的一个练手项目里面有着很多的图片展示，请求资源极大。

图片的懒加载主要是通过window的observer的api来实现的。

自定义指令的代码如下：

function hanldeImgLoad (entries) {

  entries.forEach(v => v.isIntersecting && v.target.setAttribute('src', v.target.getAttribute('data-src')))

}

const observe = new IntersectionObserver(hanldeImgLoad, { threshold: 1 })

export default {

  bind (el) {

    observe.observe(el)

  },

  unbind (el) {

    observe.unobserve(el)

  }

}

 

 

vue全局自定义指令的引入：

 

 

项目里面指令的使用：

主要是通过data-src绑定图片的获取地址，要是图片的父元素是百分比布局的，还得帮图片设置一个最小高度，以免图片没有加载出来的时候没有高度，这样会导致很多图片都会在可视区域内，导致会一下加载很多图片，丢失图片懒加载的初衷。