Vue自定义图片懒加载指令v-lazyload详解


Posted in Javascript onDecember 31, 2020

Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍。以下将详细介绍如何实现自定义指令v-lazyload。

先看如何使用这个指令:

<img v-lazyload="imageSrc" >

imageSrc是要加载的图片的实际路径。

为了实现这个指令,我们首先单独建立一个文件,名字为lazyload.js.并填写基本的代码,如下:

//Vue 图片懒加载,导出模块
export default (Vue , options = {})=>{
//初始化的选项,default是未加载图片时显示的默认图片
 var init = {
 
 default: 'https://gw.alicdn.com/tps/i1/TB147JCLFXXXXc1XVXXxGsw1VXX-112-168.png'
 }

//addListener为Vue指令的具体实现功能函数,我们这里为所有使用v-lazyload的指令的元素添加监听

//ele 是dom元素,binding是绑定的具体值,

//例如:<img v-lazyload="imageSrc" > ele是img binding是imageSrc

const addListenner = (ele,binding) =>{




}

//Vue自定义指令,lazyload为指令的名称
 Vue.directive('lazyload',{
  inserted:addListener,
  updated:addListener
 })
}

inserted 和 updated为Vue指令的执行不同阶段提供的钩子函数,查看Vue的官网可以看到一共有5个阶段, 

指令定义函数提供了几个钩子函数(可选):

bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。

update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。

componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

unbind: 只调用一次, 指令与元素解绑时调用。

这里我们只用inserted和updated就够了。

接下来我们具体实现addListener的实现。我们的具体思路如下:

1、先看看这个图片是否需要懒加载。有两种情况,一是图片还没到达可视区域,二是图片已经加载过了。

2、然后监听窗口的scroll事件,判断哪些图片可以进行懒加载了。

这里我们需要一个需要进行监听需要懒加载的图片列表和一个需要记录已经加载过得图片列表。另外为了方便数组的操作,我们加一个数组的remove方法。

继续我们的代码。

//Vue 图片懒加载
export default (Vue , options = {})=>{


//数组item remove方法

if(!Array.prototype.remove){
  Array.prototype.remove = function(item){
   if(!this.length) return
   var index = this.indexOf(item);
   if( index > -1){
    this.splice(index,1);
    return this
   }
  }
 }

var init = { 



default: 'https://gw.alicdn.com/tps/i1/TB147JCLFXXXXc1XVXXxGsw1VXX-112-168.png' 

}  

//需要进行监听的图片列表,还没有加载过得 

var listenList = [];

//已经加载过得图片缓存列表
 var imageCatcheList = [];

//是否已经加载过了
 const isAlredyLoad = (imageSrc) => {
  
 }
 //检测图片是否可以加载,如果可以则进行加载
 const isCanShow = (item) =>{
  
 };

//添加监听事件scroll
 const onListenScroll = () =>{
  
 }
 //Vue 指令最终的方法
 const addListener = (ele,binding) =>{
  //绑定的图片地址
  var imageSrc = binding.value;
  //如果已经加载过,则无需重新加载,直接将src赋值
  if(isAlredyLoad(imageSrc)){
   ele.src = imageSrc;
   return false;
  }
  var item = {
   ele:ele,
   src:imageSrc
  }
  //图片显示默认的图片
  ele.src = init.default;
  //再看看是否可以显示此图片
  if(isCanShow(item)){
   return
  }
  //否则将图片地址和元素均放入监听的lisenList里
  listenList.push(item);
  
  //然后开始监听页面scroll事件
  onListenScroll();
 }

 Vue.directive('lazyload',{
  inserted:addListener,
  updated:addListener
 })
}

接下来就几个空方法的实现了。

isAlredyLoad ,判断是否已经加载过了这个图片

const isAlredyLoad = (imageSrc) => {
  if(imageCatcheList.indexOf(imageSrc) > -1){
   return true;
  }else{
   return false;
  }
 }

isCanShow 图片是否进入可视区域,如果已经进入则进行加载

//检测图片是否可以加载,如果可以则进行加载
 const isCanShow = (item) =>{
  var ele = item.ele;
  var src = item.src;
  //图片距离页面顶部的距离
  var top = ele.getBoundingClientRect().top;
  //页面可视区域的高度
  var windowHeight = window.innerHight;
  //top + 10 已经进入了可视区域10像素
  if(top + 10 < window.innerHeight){
   var image = new Image();
   image.src = src;
   image.onload = function(){
    ele.src = src;
    imageCatcheList.push(src);
    listenList.remove(item);
   }
   return true;
  }else{
   return false;
  }
 };

onListenScroll监听滚动事件,并且检测是否进入可视区域。

const onListenScroll = () =>{
  window.addEventListener('scroll',function(){
   var length = listenList.length;
   for(let i = 0;i<length;i++ ){
    isCanShow(listenList[i]);
   }
  })
 }

最终我们的代码如下:

//Vue 图片懒加载
export default (Vue , options = {})=>{
 if(!Array.prototype.remove){
  Array.prototype.remove = function(item){
   if(!this.length) return
   var index = this.indexOf(item);
   if( index > -1){
    this.splice(index,1);
    return this
   }
  }
 }
 var init = {
  lazyLoad: false,
 default: 'https://gw.alicdn.com/tps/i1/TB147JCLFXXXXc1XVXXxGsw1VXX-112-168.png'
 }

 var listenList = [];
 var imageCatcheList = [];

 const isAlredyLoad = (imageSrc) => {
  if(imageCatcheList.indexOf(imageSrc) > -1){
   return true;
  }else{
   return false;
  }
 }
 //检测图片是否可以加载,如果可以则进行加载
 const isCanShow = (item) =>{
  var ele = item.ele;
  var src = item.src;
  //图片距离页面顶部的距离
  var top = ele.getBoundingClientRect().top;
  //页面可视区域的高度
  var windowHeight = window.innerHight;
  //top + 10 已经进入了可视区域10像素
  if(top + 10 < window.innerHeight){
   var image = new Image();
   image.src = src;
   image.onload = function(){
    ele.src = src;
    imageCatcheList.push(src);
    listenList.remove(item);
   }
   return true;
  }else{
   return false;
  }
 };

 const onListenScroll = () =>{
  window.addEventListener('scroll',function(){
   var length = listenList.length;
   for(let i = 0;i<length;i++ ){
    isCanShow(listenList[i]);
   }
  })
 }
 //Vue 指令最终的方法
 const addListener = (ele,binding) =>{
  //绑定的图片地址
  var imageSrc = binding.value;
  //如果已经加载过,则无需重新加载,直接将src赋值
  if(isAlredyLoad(imageSrc)){
   ele.src = imageSrc;
   return false;
  }
  var item = {
   ele:ele,
   src:imageSrc
  }
  //图片显示默认的图片
  ele.src = init.default;
  //再看看是否可以显示此图片
  if(isCanShow(item)){
   return
  }
  //否则将图片地址和元素均放入监听的lisenList里
  listenList.push(item);
  
  //然后开始监听页面scroll事件
  onListenScroll();
 }

 Vue.directive('lazyload',{
  inserted:addListener,
  updated:addListener
 })
}

使用时需要在主文件中引入这个文件,并且vue.use();

import LazyLoad from 'lazyLoad.js'
Vue.use(LazyLoad);

并且在需要懒加载的图片上均按照如下使用v-lazyload指令即可

<img v-lazyload="imageSrc" >

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Timer实现代码
Feb 17 Javascript
两种不同的方法实现js对checkbox进行全选和反选
May 13 Javascript
Javascript添加监听与删除监听用法详解
Dec 19 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
详解Vue.use自定义自己的全局组件
Jun 14 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
Jul 14 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
vue实现路由监听和参数监听
Oct 29 Javascript
Javascript Worker子线程代码实例
Feb 20 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 Javascript
JavaScript实现反转字符串的方法详解
Apr 27 #Javascript
jquery 禁止鼠标右键并监听右键事件
Apr 27 #jQuery
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 #jQuery
js实现添加删除表格(两种方法)
Apr 27 #Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 #jQuery
vue2 前后端分离项目ajax跨域session问题解决方法
Apr 27 #Javascript
Webpack中css-loader和less-loader的使用教程
Apr 27 #Javascript
You might like
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
配置支持SSI
2006/11/25 PHP
在命令行下运行PHP脚本[带参数]的方法
2010/01/22 PHP
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
PHP实现字符串翻转功能的方法【递归与循环算法】
2017/11/03 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
JavaScript表达式:URL 协议介绍
2013/03/10 Javascript
使用JS 清空File控件的路径值
2013/07/08 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
Javascript同时声明一连串(多个)变量的方法
2017/01/23 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
Python3.6实现连接mysql或mariadb的方法分析
2018/05/18 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
详解python变量与数据类型
2020/08/25 Python
python中的测试框架
2020/11/13 Python
幼儿教师培训感言
2014/03/08 职场文书
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
精神文明建设先进工作者事迹材料
2014/05/02 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
同乡会致辞
2015/07/30 职场文书
2016保送生自荐信范文
2016/01/29 职场文书
情侣餐厅的创业计划书范本!
2019/07/26 职场文书