vue图片懒加载-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue图片懒加载。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、首先解释一下什么叫图片懒加载：

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

2、解决思路：

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

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

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

3、好处：

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

4、代码实现（vue2）：

① test.vue 文件

<template>
  <div class="app">
    <div class="top">fjdskla</div>
    <div><img v-lazy src="../static/image/left.jpg" alt="img" /></div>
    <div><img v-lazy src="../static/image/left.png" alt="img" /></div>
    <div><img v-lazy src="../static/image/left.jpg" alt="img" /></div>
    <div><img v-lazy src="../static/image/left.png" alt="img" /></div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  created() {},
  mounted() {},
  methods: {},
}
</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 方法可能没有兼容全浏览器，如果要实现兼容全浏览器，可以引入对应的插件实现文章来源地址https://www.toymoban.com/news/detail-512433.html

到了这里，关于vue图片懒加载的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！