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 多浏览器 事件大全
Mar 23 Javascript
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
JavaScript中for-in遍历方式示例介绍
Feb 11 Javascript
jQuery实现表单提交时判断的方法
Dec 13 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
详解vue前后台数据交互vue-resource文档
Jul 19 Javascript
JS实现前端缓存的方法
Sep 21 Javascript
微信小程序在text文本实现多种字体样式
Nov 08 Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
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
拼音码表的生成
2006/10/09 PHP
PHP利用COM对象访问SQLServer、Access
2006/10/09 PHP
php错误、异常处理机制(补充)
2012/05/07 PHP
php关联数组快速排序的方法
2015/04/17 PHP
js动态添加onload、onresize、onscroll事件(另类方法)
2012/12/26 Javascript
同时使用n个window onload加载实例介绍
2013/04/25 Javascript
JavaScript学习心得之概述
2015/01/20 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
使用jQuery实现简单的tab框实例
2017/08/22 jQuery
vue-cli之router基本使用方法详解
2017/10/17 Javascript
vuex 的简单使用
2018/03/22 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
2018/08/30 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
wxPython中文教程入门实例
2014/06/09 Python
python微信公众号之关键词自动回复
2018/06/15 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
化妆品促销方案
2014/02/24 职场文书
早会主持词
2014/03/17 职场文书
优秀公益广告词大全
2014/03/19 职场文书
镇班子对照检查材料思想汇报
2014/09/24 职场文书
离婚协议书格式
2014/11/21 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript