vue图片懒加载

1.图片懒加载是什么？

们使用软件的时候，会有很多图片需要加载，但是当网络环境不好，或内存不足的情况，就会导致用户首屏加载特别慢，影响用户体验，所以为了解决这个问题，提出了图片懒加载的方法来解决该问题。

2.解决思路

        ①当图片区域到达用户界面可视区域的时候才进行加载图片

        ②首屏加载时候img标签src赋为空值，这样就不会去渲染看不见的图片而浪费时间

        ③当用户滑动到图片的可视区域后，替换src的路径，改为正式路径，则开始渲染图片

3.好处

这样做的好处就是可以使用当前网络环境来全力加载该可视区域的图片，增加加载速度；在图片没有到达可视区域的时候不会加载，避免浪费性能

4.代码实现：

        ①index.vue

<template>
  <div class="app">
    <div class="top">图片列表</div>
    <div><img v-lazy src="../static/image/1.jpg" alt="img" /></div>
    <div><img v-lazy src="../static/image/2.png" alt="img" /></div>
    <div><img v-lazy src="../static/image/3.jpg" alt="img" /></div>
    <div><img v-lazy src="../static/image/4.png" alt="img" /></div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {}
  }
}
</script>
 
<style scoped lang="scss">
.app {
  .top {
    height: 2000px;
    width: 100%;
    background-color: beige;
  }
 
  div {
    margin-top: 50px;
  }
}
</style>

        ② main.js 设置全局自定义指令 命名为 lazy

// 定义懒加载图片或者文件等，自定义指令
Vue.directive('lazy', (el, binding) => {
  let oldSrc = el.src //保存旧的src，方便后期渲染时候赋值src真实路径
  el.src = "" //将渲染的src赋为空，则不会渲染图片出来
  let observer = new IntersectionObserver(([{ isIntersecting }]) => { // 调用方法得到该elDOM元素是否处于可视区域
    if (isIntersecting) { //回调是否处于可视区域，true or false
      el.src = oldSrc //如果处于可视区域额，将最开始保存的真实路径赋予DOM元素渲染
      observer.unobserve(el) // 只需要监听一次即可，第二次滑动到可视区域时候不在监听
    }
  })
  observer.observe(el) // 调用方法
})

5.缺点

 IntersectionObserver 方法可能没有兼容全浏览器，如果要实现兼容全浏览器，可以引入对应的插件实现