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 相关文章推荐
使用onbeforeunload属性后的副作用
Mar 08 Javascript
Jquery图片滚动与幻灯片的实例代码
Apr 08 Javascript
详解AngularJS实现表单验证
Dec 10 Javascript
AngularJS中的DOM操作用法分析
Nov 04 Javascript
JS重载实现方法分析
Dec 16 Javascript
详解用vue.js和laravel实现微信授权登陆
Jun 23 Javascript
JavaScript Canvas实现验证码
Aug 02 Javascript
微信小程序新手教程之页面打开数量限制
Mar 03 Javascript
Vue 组件修改根实例的数据的方法
Apr 02 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
May 13 Javascript
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
JavaScript实现鼠标经过表格某行时此行变色
Nov 20 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
生成卡号php代码
2008/04/09 PHP
php pcntl_fork和pcntl_fork 的用法
2009/04/13 PHP
php 引用(&amp;)详解
2009/11/20 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
js保存当前路径(cookies记录)
2010/12/14 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
自己封装的一个原生JS拖动方法(推荐)
2016/11/22 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
python中的内置函数getattr()介绍及示例
2014/07/20 Python
详解Python中的array数组模块相关使用
2016/07/05 Python
你应该知道的python列表去重方法
2017/01/17 Python
Python处理文本文件中控制字符的方法
2017/02/07 Python
python字符串Intern机制详解
2019/07/01 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
详解Flask前后端分离项目案例
2020/07/24 Python
Django数据统计功能count()的使用
2020/11/30 Python
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
外贸员简历中的自我评价
2014/03/04 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
应届生求职信范文
2014/06/30 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS