IntersectionObserver API to implement V-LazyLoad command to Complete image lazy loading (VUE)

The HTML code

<ul class="imgs_list">
    <li v-for="(item, i) in imgsData" :key="i">
      <img v-lazyload="item">
    </li>
</ul>
Copy the code

Register global custom specified V-lazyLoad

// The current code is unloaded from main.js
Vue.directive('lazyload', {
  bind: function (el, bindVal) {
    const lazyLoadObser = new IntersectionObserver((entries, observer) = > {
      entries.forEach((entry, index) = > {
        const lazyImg = entry.target
        // intersectionRatio: visibility ratio of target elements,
        // That is, the proportion of intersectionRect to boundingClientRect,
        // Completely visible is 1, completely invisible is less than or equal to 0
        if (entry.intersectionRatio > 0) {
          lazyImg.src = bindVal.value
          console.log(111)
          lazyLoadObser.unobserve(lazyImg)
        }
      })
    })
    lazyLoadObser.observe(el)
  }
})
Copy the code

Refer to the link: www.ruanyifeng.com/blog/2016/1…