vue-lazyload使用总结(推荐)
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
当你用vue开发的时候,不可避免的就会遇到图片懒加载的问题,之前jquery时代有jquery.lazyload.js,但是那个肯定不能用在vue的项目里。查阅资料后发现Vue-Lazyload这个插件用的频率还是比较高,最近刚好也在研究vue的懒加载,顺便也仔细研究了以下这个插件,这个插件确实能够实现懒加载,但是坑也有不少,今天就一起来看看Vue-Lazyload。 Vue-Lazyload的github地址
主要功能&实现思路
这篇文章不是去讲解这个插件是如何配置的,这个在它的github上都有介绍,因此你要先大致了解它是如何配置的。这里主要从源码角度去分析该如何正确使用这款插件。
v-lazy
这个是Vue-Lazyload最常用的一个东西,用法也非常的简单:
我们现在来看看它的内部是如何实现的,首先我们进入它github上的源码可以发现它的定义:
1 2 3 4 5 6 7 8 9 10 11 | 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:
进入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='src'中的src一定要使用data里面的变量,不能写真实的图片路径,这样会报错导致没有效果,因为vue的自定义指令必须对应data中的变量或者是数字,你写一个图片路径识别不了,我之前就是被坑了。(这里的图片fadeIn效果是在load事件之后添加了一个fadeIn的class)。
v-lazy-container
这个总体上和v-lazy差不多,也是通过自定义指令去定义的,不过v-lazy-container扫描的是内部的子元素,v-lazy-container一般使用如下:
1 2 3 4 5 | < 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去设置图片的路径的,我们看内部实现就可以看到:
1 2 3 4 5 6 7 8 9 10 | 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内部指定元素设置的data-src是图片的真实路径,不能是data变量,这个和v-lazy完全相反。
lazy-component
这个和上面的不太一样,这个严格来说不单单能够做图片懒加载,还可以做组件的懒加载,一般结构如下:
1 2 3 | <lazy-component @show= "handler" > <img class= "mini-cover" :src= "img.src" width= "100%" height= "400" > </lazy-component> |
实现方面,先用Vue.component('lazy-component',...)注册了一个全局的组件,然后通过检测位置,如果在视图范围之内就吐出它内部的内容,这个设计还是比较巧妙:
1 2 3 4 5 6 | 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了,所以我们可以在外层监听这个事件:
我们来看一个做好的demo,这个demo还是以实现图片懒加载为主。
注:lazy-component本身不能实现图片懒加载,它只是实现组件懒加载,上面demo真正实现懒加载是因为用了v-lazy。lazy-component有一个问题,就是它的上方必须要有东西,否则可能没有效果,因为它在检测的时候有一个判断:bottom>0,所以如果你在第一个元素使用lazy-component可能没有效果。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
在vue中使用vant TreeSelect分类选择组件操作
这篇文章主要介绍了在vue中使用vant TreeSelect分类选择组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11Laravel 如何在blade文件中使用Vue组件的示例代码
这篇文章主要介绍了Laravel 如何在blade文件中使用Vue组件,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-06-06使用VueRouter的addRoutes方法实现动态添加用户的权限路由
这篇文章主要介绍了使用VueRouter的addRoutes方法实现动态添加用户的权限路由,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-06-06
最新评论