Vue实现一个图片懒加载插件


Posted in Javascript onMarch 11, 2019

前言

图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要。今天就用vue来实现一个图片懒加载的插件。 这篇博客采用“三步走”战略——Vue.use()、Vue.direction、Vue图片懒加载插件实现,逐步实现一个Vue的图片懒加载插件。

Vue.use()

就像开发jQuery插件要用$.fn.extent()一样,开发Vue插件我们要用Vue.use()。其实就是官方内部实现的一个方法,供广大开发者灵活开发属于自己的插件。只需要按照约定好的规则开发就行。

用法

安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传入。

该方法需要在调用 new Vue() 之前被调用。

当 install 方法被同一个插件多次调用,插件将只会被安装一次。

注:install方法或者被当做install方法的方法它的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象。

参考链接:

  • https://cn.vuejs.org/v2/api/#Vue-use
  • https://3water.com/article/146461.htm 

Vue.direction自定义指令

用法——全局注册和局部注册

全局注册

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
 // 当被绑定的元素插入到 DOM 中时……
 inserted: function (el) {
 // 聚焦元素
 el.focus()
 }
})

局部注册

directives: {
 focus: {
 // 指令的定义
 inserted: function (el) {
 el.focus()
 }
 }
}

钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选):

  • bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  • inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
  • update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
  • componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  • unbind:只调用一次,指令与元素解绑时调用。

钩子函数的参数

  • el:指令所绑定的元素,可以用来直接操作 DOM 。
  • binding:一个对象,包含以下属性:
  • name:指令名,不包括 v- 前缀。
  • value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2。
  • oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression:字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"。
  • arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"。
  • modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。
  • vnode:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
  • oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

参考链接:https://cn.vuejs.org/v2/guide/custom-directive.html

Vue图片懒加载插件实现

思路:事先提供俩个空数组listenList(收集未加载的图片元素和资源)和imageCacheList(收集已加载的图片资源)。然后,判断图片是否到达可视区,如果到达,则用Image对象去加载资源图片,加载完毕后赋值给绑定元素的src让其显示。同时,将加载过的资源放入imageCacheList数组,用isAlredyLoad方法做个判断,防止之后相同的资源重复加载。如果没到达,则将元素和资源对象放到listenList数组,最后进行滚动监听。监听listenList数组中的元素是否可以加载资源。

插件的实现:

// 引入Vue构造函数
import Vue from 'vue'

var lazyload = {
 // Vue.use() 默认加载install,并且将Vue当做第一个参数传递过来
 install(vue,payload) {
 // 数组扩展移除元素
 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 defaultImage = payload.defaultImage || 'https://gw.alicdn.com/tps/i1/TB147JCLFXXXXc1XVXXxGsw1VXX-112-168.png';
 var errorImage = payload.errorImage || 'https://gw.alicdn.com/tps/i1/TB147JCLFXXXXc1XVXXxGsw1VXX-112-168.png';
 // 默认离可视区10px时加载图片
 var distanece = payload.scrollDistance || 10;
 // 收集未加载的图片元素和资源
 var listenList = [];
 // 收集已加载的图片元素和资源
 var imageCacheList = [];

 // 是否已经加载完成的图片
 const isAlredyLoad = (imageSrc) => {
 if(imageCacheList.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 - distance 距离可视区域还有distance像素
 if(top - distanece < window.innerHeight){ 
 var image = new Image();
 image.src = src;
 image.onload = function() {
 ele.src = src;
 imageCacheList.push(src);
 listenList.remove(item);
 }
 image.onerror = function() {
 ele.src = errorImage;
 imageCacheList.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 = defaultImage;

 //再看看是否可以显示此图片
 if(isCanShow(item)){
 return
 }

 //否则将图片地址和元素均放入监听的lisenList里
 listenList.push(item);
 
 //然后开始监听页面scroll事件
 onListenScroll();
 }

 Vue.directive('lazyload',{
 inserted: addListener,
 updated: addListener
 })
 }
}

export default lazyload;

插件的调用:

import Vue from 'vue'
import App from './App'
import router from './router'
import Lazyload from './common/js/lazyload'

// 参数均为可选
Vue.use(Lazyload,{
 scrollDistance: 15, // 距离可视区还有15px时开发加载资源
 defaultImage: '', // 资源图片未加载前的默认图片(绝对路径)
 errorImage:'' // 资源图片加载失败时要加载的资源(绝对路径)
})

参考链接:https://3water.com/article/112355.htm

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 Javascript
jQuery 连续列表实现代码
Dec 21 Javascript
深入理解JavaScript作用域和作用域链
Oct 21 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
Jun 08 Javascript
jQuery复制节点用法示例(clone方法)
Sep 08 Javascript
微信小程序 window_x64环境搭建
Sep 30 Javascript
JavaScript函数节流的两种写法
Apr 07 Javascript
微信小程序实现收藏与取消收藏切换图片功能
Aug 03 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
Feb 08 Javascript
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
使用Jenkins部署React项目的方法步骤
Mar 11 #Javascript
vue基础之v-bind属性、class和style用法分析
Mar 11 #Javascript
配置eslint规范项目代码风格
Mar 11 #Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
Mar 11 #Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
Mar 11 #Javascript
每天学点Vue源码之vm.$mount挂载函数
Mar 11 #Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 #Javascript
You might like
php中autoload的用法总结
2013/11/08 PHP
php进行支付宝开发中return_url和notify_url的区别分析
2014/12/22 PHP
php结合安卓客户端实现查询交互实例
2015/05/05 PHP
PHP 二级子目录(后台目录)设置二级域名
2017/03/02 PHP
为数据添加append,remove功能
2006/10/03 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
canvas绘制七巧板
2017/02/03 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
VUE实现图片验证码功能
2020/11/18 Javascript
Python群发邮件实例代码
2014/01/03 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
Python reduce函数作用及实例解析
2020/05/08 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
澳大利亚领先的在线药房:Pharmacy Online(有中文站)
2020/02/22 全球购物
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
经济与贸易专业应届生求职信
2013/11/19 职场文书
幼儿园教研活动方案
2014/01/19 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
环卫处个人工作总结
2015/03/04 职场文书
防汛通知
2015/04/25 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书