首页
所有分类
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 相关文章推荐
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 Javascript
JQuery中dataGrid设置行的高度示例代码
Jan 03 Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
深入理解选择框脚本[推荐]
Dec 13 Javascript
jqueryUI tab标签页代码分享
Oct 09 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
利用JavaScript为句子加标题的3种方法示例
Jan 05 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
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
入门基础(1) 数据类型(8) Bean(3) 触发器(3) XML(1) 虚拟机(3) Hash(1) RabbitMQ(3) Geospatial(1) Vmware(3)
You might like
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
php获取随机数组列表的方法
2014/11/13 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
Laravel5.1 框架表单验证操作实例详解
2020/01/07 PHP
浅谈javascript 面向对象编程
2009/10/28 Javascript
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
基于javascript的COOkie的操作实现只能点一次
2014/12/26 Javascript
JavaScript中的方法重载实例
2015/03/16 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
Vue 路由间跳转和新开窗口的方式（query、params）
2019/12/25 Javascript
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
Python对小数进行除法运算的正确方法示例
2014/08/25 Python
Python的批量远程管理和部署工具Fabric用法实例
2015/01/23 Python
Python中property函数用法实例分析
2018/06/04 Python
python基于Selenium的web自动化框架
2019/07/14 Python
Python 识别12306图片验证码物品的实现示例
2020/01/20 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
Raleigh兰令自行车美国官网：英国凤头牌自行车
2018/01/08 全球购物
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
结婚典礼证婚词
2014/01/11 职场文书
大学英语演讲稿（中英文对照）
2014/01/14 职场文书
五一劳动节活动记录
2014/03/23 职场文书
区级文明单位申报材料
2014/05/15 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
医院志愿者活动总结
2015/05/06 职场文书
世界十大动漫制作公司排行榜，迪士尼上榜，第二是美国代表性文化符
2022/03/18 欧美动漫
关于vue-router-link选择样式设置
2022/04/30 Vue.js