首页 > 网络编程 > JavaScript > 正文

vue-lazyload使用总结(推荐)_vue.js

2018-11-10 10:00:55

当你用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可能没有效果。

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

您可能感兴趣的文章:

  • vue-lazyload图片延迟加载插件的实例讲解
  • 浅谈vue中使用图片懒加载vue-lazyload插件详细指南
  • 浅谈vue-lazyload实现的详细过程
  • Vue自定义图片懒加载指令v-lazyload详解
  • 分享一个精简的vue.js 图片lazyload插件实例
  • 相关标签:JavaScript
  • 本文发布HTML5中文学习网 ,转载请注明出处,感谢您!
  • 相关文章


  • Asp.net Core与类库读取配置文件信息的方法_实用技巧
  • asp.net在Repeater嵌套的Repeater中使用复选框详解_实用技巧
  • 利用IIS调试ASP.NET网站程序的完整步骤_实用技巧
  • Asp.Net Core轻松学习系列之配置文件_实用技巧
  • ASP.NET 页生命周期概述(小结)_实用技巧
  • 详解ASP.NET Core WebApi 返回统一格式参数_实用技巧
  • 2018年网络流行语有哪些?2018年十大网络流行语盘点
  • 华为首席财务官孟晚舟被暂扣 深圳市政府要求加方立即放人!
  • 微信支付勒索病毒制造者被锁定 网友:史上最蠢的黑客!
  • 英国电信宣布从核心设备中删除华为产品 5G不采用
  • 独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    作者信息

    kevin

    永远在学习的路上!

    相关教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 热门教程