vue-lazyload使用总结(推荐)


Posted in Javascript onNovember 01, 2018

当你用vue开发的时候,不可避免的就会遇到图片懒加载的问题,之前jquery时代有jquery.lazyload.js,但是那个肯定不能用在vue的项目里。查阅资料后发现Vue-Lazyload这个插件用的频率还是比较高,最近刚好也在研究vue的懒加载,顺便也仔细研究了以下这个插件,这个插件确实能够实现懒加载,但是坑也有不少,今天就一起来看看Vue-Lazyload。 Vue-Lazyload的github地址

主要功能&实现思路

这篇文章不是去讲解这个插件是如何配置的,这个在它的github上都有介绍,因此你要先大致了解它是如何配置的。这里主要从源码角度去分析该如何正确使用这款插件。

v-lazy

这个是Vue-Lazyload最常用的一个东西,用法也非常的简单:

<ul>
   <li v-for="img in list">
     <img v-lazy="img.src" >
   </li>
</ul>

我们现在来看看它的内部是如何实现的,首先我们进入它github上的源码可以发现它的定义:

Vue.directive('lazy', {
  bind: lazy.add.bind(lazy),
  update: lazy.update.bind(lazy),
  componentUpdated: lazy.lazyLoadHandler.bind(lazy),
  unbind: lazy.remove.bind(lazy)
})
Vue.directive('lazy-container', {
  bind: lazyContainer.bind.bind(lazyContainer),
  update: lazyContainer.update.bind(lazyContainer),
  unbind: lazyContainer.unbind.bind(lazyContainer)
})

我们可以发现它是利用vue的自定义指令实现的,vue的自定义指令可以自定义v-***之类的指令,例如你定义了Vue.directive('demo',..)那么你就可以使用v-demo这样的指令,当你使用了之后就会有对应事件供你回调,例如bind,insert,unbind等,具体可以看看下面的demo:

=> vue自定义指令(二维码)

进入demo后我们可以看到一进去就出发了bind和insert事件,然后你在输入框输入内容就会触发update和updateComponent事件,当你点击隐藏就会触发unbind事件,当你点击显示则又会触发bind和insert事件。(具体含义可以去查阅官方文档)

vue的自定义指令还可以带参数,例如vue-lazy:background-image.container='src'这样的结构,我们可以通过事件里面的binding参数获取到,例如上面的background-image可以通过binding.arg获取,.container可以通过binding.modifiers获取。

好了,讲了这么多,v-lazy的实现思路应该比较清楚了,就是内部实现了一个lazy的类,通过vue自定义指令将对象和参数传进去,然后通过检测事件(scroll等)检测位置,如果一旦这个对象出现在屏幕里就加载图片。下面看看已经实现好的demo:(包含img的v-lazy和div的v-lazy:background-image两种情况)

=> v-lazy demo(二维码)

注意:这里的v-lazy='src'中的src一定要使用data里面的变量,不能写真实的图片路径,这样会报错导致没有效果,因为vue的自定义指令必须对应data中的变量或者是数字,你写一个图片路径识别不了,我之前就是被坑了。(这里的图片fadeIn效果是在load事件之后添加了一个fadeIn的class)。

v-lazy-container

这个总体上和v-lazy差不多,也是通过自定义指令去定义的,不过v-lazy-container扫描的是内部的子元素,v-lazy-container一般使用如下:

<div v-lazy-container="{ selector: 'img' }">
   <img data-src="//domain.com/img1.jpg">
  <img data-src="//domain.com/img2.jpg">
  <img data-src="//domain.com/img3.jpg">
</div>

v-lazy-container和v-lazy不同的是,v-lazy-container是通过设置指定的子元素的data-src,data-loading,data-error去设置图片的路径的,我们看内部实现就可以看到:

const imgs = this.getImgs()
imgs.forEach(el => {
   this.lazy.add(el, assign({}, this.binding, {
     value: {
       src: 'dataset' in el ? el.dataset.src : el.getAttribute('data-src'),
       error: 'dataset' in el ? el.dataset.error : el.getAttribute('data-error'),
       loading: 'dataset' in el ? el.dataset.loading : el.getAttribute('data-loading')
     }
   }), this.vnode)
 })

下面是写好的v-lazy-container demo:

=> v-lazy-container demo(二维码)

注:v-lazy-container内部指定元素设置的data-src是图片的真实路径,不能是data变量,这个和v-lazy完全相反。

lazy-component

这个和上面的不太一样,这个严格来说不单单能够做图片懒加载,还可以做组件的懒加载,一般结构如下:

<lazy-component @show="handler">
   <img class="mini-cover" :src="img.src" width="100%" height="400">
</lazy-component>

实现方面,先用Vue.component('lazy-component',...)注册了一个全局的组件,然后通过检测位置,如果在视图范围之内就吐出它内部的内容,这个设计还是比较巧妙:

render (h) {
   if (this.show === false) {
     return h(this.tag)
   }
   return h(this.tag, null, this.$slots.default)
 },

我们一般用component都是指定一个template,它这里是利用render来自己生成内容,它这里通过一个变量show控制是否绘制内部的内容,开始的时候show为false,那么这里就绘制一个div(tag为div),等检测(检测div)出现屏幕了,show就为true,就会绘制它内部的真实内容了(this.$slots.default就是自定义控件下面的内容)。

lazy-component作为一个组件,给外部提供了一个回调事件(show),表示已经开始load了,所以我们可以在外层监听这个事件:

load () {
   this.show = true
   this.state.loaded = true
   this.$emit('show', this)
 }

我们来看一个做好的demo,这个demo还是以实现图片懒加载为主。

=> lazy-component demo(二维码)

注:lazy-component本身不能实现图片懒加载,它只是实现组件懒加载,上面demo真正实现懒加载是因为用了v-lazy。lazy-component有一个问题,就是它的上方必须要有东西,否则可能没有效果,因为它在检测的时候有一个判断:bottom>0,所以如果你在第一个元素使用lazy-component可能没有效果。

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

Javascript 相关文章推荐
JQuery从头学起第一讲
Jul 04 Javascript
用jQuery中的ajax分页实现代码
Sep 20 Javascript
Javascript事件实例详解
Nov 06 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
Apr 12 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
微信小程序 toast 详解及实例代码
Nov 09 Javascript
js 提取某()特殊字符串长度的实例
Dec 06 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
Aug 25 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
Nov 30 Javascript
React如何实现浏览器打印部分内容详析
May 19 Javascript
vue-cli 为项目设置别名的方法
Oct 15 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
Nov 01 #Javascript
Vue列表渲染的示例代码
Nov 01 #Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 #Javascript
Vue表单输入绑定的示例代码
Nov 01 #Javascript
浅谈Angular 观察者模式理解
Nov 01 #Javascript
详解vuex状态管理模式
Nov 01 #Javascript
详解angularjs跨页面传参遇到的一些问题
Nov 01 #Javascript
You might like
PHP中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
php新建文件自动编号的思路与实现
2011/06/27 PHP
使用php实现下载生成某链接快捷方式的解决方法
2013/05/07 PHP
spl_autoload_register与autoload的区别详解
2013/06/03 PHP
php使用wordwrap格式化文本段落的方法
2015/03/17 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
JavaScript URL参数读取改进版
2009/01/16 Javascript
JavaScript 继承的实现
2009/07/09 Javascript
jQuery之end()和pushStack()使用介绍
2012/02/07 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
深入理解$.each和$(selector).each
2016/05/15 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
2016/11/21 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
python单例模式实例解析
2018/08/28 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
美国休闲服装品牌:J.Crew Factory
2017/03/04 全球购物
Banana Republic英国官网:香蕉共和国,GAP集团旗下偏贵族风
2018/04/24 全球购物
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
2014年学雷锋活动总结
2014/06/26 职场文书
庆六一活动总结
2014/08/29 职场文书
2014年环保局工作总结
2014/12/11 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书
SpringBoot集成Redis的思路详解
2021/10/16 Redis