vue图片懒加载代码实现
作者：重工潇洒哥
这篇文章主要给大家介绍了关于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 方法可能没有兼容全浏览器，如果要实现兼容全浏览器，可以引入对应的插件实现
总结
到此这篇关于vue图片懒加载代码实现的文章就介绍到这了,更多相关vue图片懒加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！