电子商务网站建设与维护的考试,饮水机企业网站模板,微站是什么东西,wordpress怎么用畅言1.什么是图片懒加载
概念当图片还未出现在浏览器的可视区#xff0c;图片并不加载src所引入的图片资源。只有当图片出现在可视区时#xff0c;才加载图片资源。 好处#xff1a;当页面中需要许多图片进行展示。但是#xff0c;在我们不可视区的图片我们可以进行图片懒加载…1.什么是图片懒加载
概念当图片还未出现在浏览器的可视区图片并不加载src所引入的图片资源。只有当图片出现在可视区时才加载图片资源。 好处当页面中需要许多图片进行展示。但是在我们不可视区的图片我们可以进行图片懒加载加快可视区的图片显示防止出现可视区过多图片不显示的效果。有利于提示用户的体验度。
2.在vue2中实现图片懒加载
通过自定义指令
1.在src下新建directives-lazy.js文件。并在lazy.js下书写以下代码
// 通过自定义指令 实现图片加载
export default {bind(el) {//1.将src保存后 清除el.srcconst src el.srcel.src const observe new IntersectionObserver((entries) {console.log(执行了);//2.出现在可视区 赋予src 加载图片if (entries[0].isIntersecting) {console.log(123);el.src src//关闭 observe观察 防止多次执行observe.unobserve(el)}})observe.observe(el)}
}2.在main.js中 书写以下代码
//自定义指令 实现 图片懒加载 引入 全局注册
import lazy from /directives/lazy
Vue.directive(lazy, lazy)3.在图片标签上 书写
img v-lazy src图片资源路径 /相关知识点https://v2.cn.vuejs.org/v2/guide/custom-directive.html
