首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

实现一个Vue自定义指令懒加载的方法示例

Posted in Javascript onJune 04, 2020

在项目中如果有大量的图片需要加载的时候，就可以考虑使用懒加载了，懒加载其实就是监听浏览器的滚动，当滚动到一定的范围的时候就将图片的真实路径赋给src,然后取消监听。实现的方法也比较简单，可以通过懒加载的插件实现，也可以手写，手写通过vue自定义指令来实现，一般情况自定义指令用的也不多，比较vue自带的就够用了，大型复杂的项目的可能用的多。

什么是图片懒加载

当我们向下滚动的时候图片资源才被请求到，这也就是我们本次要实现的效果，进入页面的时候，只请求可视区域的图片资源这也就是懒加载。

比如我们加载一个页面，这个页面很长很长，长到我们的浏览器可视区域装不下，那么懒加载就是优先加载可视区域的内容，其他部分等进入了可视区域在加载。

这个功能非常常见，你打开淘宝的首页，向下滚动，就会看到会有图片不断的加载；你在百度中搜索图片，结果肯定成千上万条，不可能所有的都一下子加载出来的，很重要的原因就是会有性能问题。你可以在Network中查看，在页面滚动的时候，会看到图片一张张加载出来。

实现一个Vue自定义指令懒加载的方法示例

为什么要做图片懒加载

懒加载是一种网页性能优化的方式，它能极大的提升用户体验。就比如说图片，图片一直是影响网页性能的主要元凶，现在一张图片超过几兆已经是很经常的事了。如果每次进入页面就请求所有的图片资源，那么可能等图片加载出来用户也早就走了。所以，我们需要懒加载，进入页面的时候，只请求可视区域的图片资源。

总结出来就两个点：

1.全部加载的话会影响用户体验

2.浪费用户的流量，有些用户并不像全部看完，全部加载会耗费大量流量。

懒加载原理

图片的标签是 img标签，图片的来源主要是 src属性，浏览器是否发起加载图片的请求是根据是否有src属性决定的。

所以可以从 img标签的 src属性入手，在没进到可视区域的时候，就先不给 img 标签的 src属性赋值。

懒加载实现

实现效果图：

实现一个Vue自定义指令懒加载的方法示例

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  div {
   display: flex;
   flex-direction: column;
  }
  img {
   width: 100%;
   height: 300px;
  }
 </style>
</head>
<body>
 <div>
  <img data-src="https://cdn.suisuijiang.com/ImageMessage/5adad39555703565e79040fa_1590657907683.jpeg">
  <img data-src="https://cdn.suisuijiang.com/ImageMessage/5adad39555703565e79040fa_1590657913523.jpeg">
  <img data-src="https://cdn.suisuijiang.com/ImageMessage/5adad39555703565e79040fa_1590657925550.jpeg">
  <img data-src="https://cdn.suisuijiang.com/ImageMessage/5adad39555703565e79040fa_1590657930289.jpeg">
  <img data-src="https://cdn.suisuijiang.com/ImageMessage/5adad39555703565e79040fa_1590657934750.jpeg">
  <img data-src="https://cdn.suisuijiang.com/ImageMessage/5adad39555703565e79040fa_1590657918315.jpeg">
 </div>
</body>
</html>

监听滚动根据offsetTop判断

const imgs = [...document.getElementsByTagName('img')];
 let n = 0;

 lazyload();
 function throttle(fn, wait) {
 let timer = null;
 return function(...args) {
  if(!timer) {
   timer = setTimeout(() => {
    timer = null;
    fn.apply(this, args)
   }, wait)
  }
 }
 }
 window.addEventListener('scroll', throttle(lazyload, 200));
 
 function lazyload() {
 var innerHeight = window.innerHeight; 
 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 for(let i = n; i < imgs.length; i++) {
  if(imgs[i].offsetTop < innerHeight + scrollTop) {
   imgs[i].src = imgs[i].getAttribute("data-src");
   n = i + 1;
  }
  
 }
 }

可能会存在下面几个问题：

  • 每次滑动都要执行一次循环，如果有1000多个图片，性能会很差
  • 每次读取 scrollTop 都会引起回流
  • scrollTop跟DOM的嵌套关系有关，应该根据getboundingclientrect获取
  • 滑到最后的时候刷新，会看到所有的图片都加载了

IntersectionObserver

const imgs = [...document.getElementsByTagName('img')];
// 当监听的元素进入可视范围内的会触发回调
 if(IntersectionObserver) {
  let lazyImageObserver = new IntersectionObserver((entries, observer) => {
   entries.forEach((entry, index) => {
    let lazyImage = entry.target;
    // 相交率，默认是相对于浏览器视窗
    if(entry.intersectionRatio > 0) {
    lazyImage.src = lazyImage.getAttribute('data-src');
    // 当前图片加载完之后需要去掉监听
     lazyImageObserver.unobserve(lazyImage);
    }

   })
  })
  for(let i = 0; i < imgs.length; i++) {
  lazyImageObserver.observe(imgs[i]);
  }
 }

codePen

vue自定义指令-懒加载

Vue自定义指令

下面的api来自官网自定义指令：

钩子函数

  • bind: 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  • inserted: 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
  • update: 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
  • componentUpdated: 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  • unbind: 只调用一次，指令与元素解绑时调用。

钩子函数参数

指令钩子函数会被传入以下参数：

  • el：指令所绑定的元素，可以用来直接操作 DOM。
  • binding：一个对象，包含以下 property：
    • name：指令名，不包括 v- 前缀。
    • value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
    • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
    • expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
    • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
    • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
  • vnode：Vue 编译生成的虚拟节点。
  • oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

实现 v-lazyload 指令

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
   img {
    width: 100%;
    height: 300px;
   }
  </style>
 </head>
 <body>
  <div id="app">
   <p v-for="item in imgs" :key="item">
    <img v-lazyload="item">
   </p>
  </div>
 </body>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 <script>
  Vue.directive("lazyload", {
   // 指令的定义
   bind: function(el, binding) {
    let lazyImageObserver = new IntersectionObserver((entries, observer) => {
     entries.forEach((entry, index) => {
      let lazyImage = entry.target;
      // 相交率，默认是相对于浏览器视窗
      if(entry.intersectionRatio > 0) {
       lazyImage.src = binding.value;
       // 当前图片加载完之后需要去掉监听
       lazyImageObserver.unobserve(lazyImage);
      }

     })
    })
    lazyImageObserver.observe(el);
   },
  });
  var app = new Vue({
   el: "#app",
   data: {
    imgs: [
     'https://cdn.suisuijiang.com/ImageMessage/5adad39555703565e79040fa_1590657907683.jpeg',
     'https://cdn.suisuijiang.com/ImageMessage/5adad39555703565e79040fa_1590657913523.jpeg',
     'https://cdn.suisuijiang.com/ImageMessage/5adad39555703565e79040fa_1590657925550.jpeg',
     'https://cdn.suisuijiang.com/ImageMessage/5adad39555703565e79040fa_1590657930289.jpeg',
     'https://cdn.suisuijiang.com/ImageMessage/5adad39555703565e79040fa_1590657934750.jpeg',
     'https://cdn.suisuijiang.com/ImageMessage/5adad39555703565e79040fa_1590657918315.jpeg',
    ]
   },
  });
 </script>
</html>

codePen

参考

延迟加载(Lazyload)三种实现方式

原生js实现图片懒加载（lazyLoad）

到此这篇关于实现一个Vue自定义指令懒加载的方法示例的文章就介绍到这了,更多相关Vue自定义指令懒加载内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

实现一个Vue自定义指令懒加载的方法示例

- Author -

木子星兮

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
文本加密解密
Jun 23 Javascript
Javascript 入门基础学习
Mar 10 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
html向js方法传递参数具体实现
Aug 08 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Sep 18 Javascript
前端编码规范（3）JavaScript 开发规范
Jan 21 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
Vue + Elementui实现多标签页共存的方法
Jun 12 Javascript
vue实现移动端图片上传功能
Dec 23 Javascript
JavaScript实现下拉列表
Jan 20 Javascript
vue基础知识--axios合并请求和slot
Jun 04 #Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 #Javascript
微信小程序学习总结（一）项目创建与目录结构分析
Jun 04 #Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 #Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 #Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 #jQuery
JavaScript字符和ASCII实现互相转换
Jun 03 #Javascript
DE1102(1) R72E(1) R71E(1) WR-800F(1) 对讲机(1) ICOM(2) 胆机(1) R9700(1) DE1107(3) React(6)
You might like
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
php与Mysql的一些简单的操作
2015/02/26 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
详解php用static方法的原因
2018/09/12 PHP
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
利用js实现简易红绿灯
2020/10/15 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
深入理解Javascript中的this关键字
2015/03/27 Python
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
如何使用localstorage代替cookie实现跨域共享数据问题
2018/04/18 HTML / CSS
连卡佛中国官网：Lane Crawford中文站
2018/01/27 全球购物
英国第一的滑雪服装和装备零售商：Snow+Rock
2020/02/01 全球购物
几个Shell Script面试题
2012/08/31 面试题
实习教师自我鉴定
2013/12/12 职场文书
军训生自我鉴定范文
2013/12/27 职场文书
动员大会主持词
2014/03/20 职场文书
2015年植树节活动总结
2015/02/06 职场文书
储备店长岗位职责
2015/04/14 职场文书
幼儿园六一主持词
2015/06/30 职场文书
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技