模板简介
模板使用说明(必读)
主题配色问题
关于V5模板中的CSS变量
首页修改地址后刷新不变的问题
顶部导航对应侧边栏菜单切换
侧边栏菜单的JS初始化
iframe子页面刷新问题
iframe版本右侧内容区域404问题
关于非iframe版本菜单高亮
iframe版本的Tab插件相关问题
关于iframe版本里面的加载动画
webuploader使用时候的问题
模板字体图标问题
关于版权和商业用途
模板中固有插件
bootstrap-colorpicker颜色选择
bootstrap-datepicker日期选择
bootstrap-datetimepicker日期时间
bootstrap-maxlength长度验证
bootstrap-select下拉选择
bootstrap-table表格插件
fullcalendar日程插件
jquery-confirm对话框
jquery-tagsinput标签插件
magnific-popup图片查看
webuploader上传插件
bootstrap-notify消息插件
chartjs图表插件
bootstrap.wizard向导插件
perfect-scrollbar滚动条插件
bootstrap-multitabs多标签
moment.js日期处理类
loading插件
popper插件
插件项目包含插件
bootstrap-daterangepicker
material-datetimepicker
dropzone上传
cropper图片裁剪
ckeditor富文本编辑器
editor.md编辑器
summernote富文本编辑器
tinymce富文本编辑器
ueditor富文本编辑器
wangeditor富文本编辑器
jquery-validate表单验证
bootstrap-selectN联动
bootstrap-lyear-select下拉
select2下拉选择框
lyear-dropdowntree下拉树状
ZTree树形菜单
treeview树状插件
jstree树状结构
imgVer拼图滑块
sliderVerification滑块验证
layer弹窗插件
jquery.auto.complete自动填充
fixedheadertable固定表头
fontIconPicker图标选择
jQuery Raty评分插件
jquery.toolbar弹出式工具栏
bootstrap-touchspin输入微调器
插件项目包含示例
表单布局示例
聊天页面示例
logo处使用文字
模态框中使用Tab
模态框最大化
搜索布局
搜索布局2
选择示例
选择示例2
选择示例3
选择示例4
代码演示切换
留言列表布局
布局(数据统计篇)
布局(产品价格篇)
布局(搜索框篇)
布局(用户篇)
布局(动画篇)
布局(其他篇)
另一种侧边栏菜单
顶部和左侧联动
JS初始化菜单
H5上传
关于iframe版本里面的加载动画 - 光年模板(V5)说明文档 - 笔下光年
网站首页
关于iframe版本里面的加载动画
大家应该注意到,v5的iframe版本比之前的版本多了一个加载等待的动画,因为之前v3和v4的时候有不少小伙伴问这个问题,结合整个模板来说确实也稍微有些复杂,所以在v5版本里面才去实现。 这里简单说一下大概的逻辑,有些小伙伴可能觉得有些慢。但是需要说明一下的是,因为目前iframe版本也做了主题,主题切换或者已经保存了新主题的时候,打开tab,浏览器会有一个闪动的bug,因为iframe里面的页面和index主页是分开的,每次打开一个新页面,页面会有一个从白色到你设定的主题色的一个渐变过程,看起来就相当于闪一下。loading加载也是为了掩盖这个缺陷。 下面说一下具体逻辑: 1、用户点击菜单链接,tab打开时,会开启加载动画。 ```javascript // multitabs.js里面大概355行。 $('#lyear-loading').fadeIn('fast', function () { $tabPane.attr('src', param.url); }); ``` 2、iframe绑定了load事件,页面加载后,回调用index.min.js里面的方法设置主题颜色,然后将其关闭。 ```javascript if(!$tabPane[0].addEventListener){ $tabPane[0].attachEvent('onload', function () { callbackTheme($tabPane, function () { $('#lyear-loading').fadeOut('slow'); }); }); } $tabPane[0].addEventListener('load', function () { callbackTheme($tabPane, function () { $('#lyear-loading').fadeOut('slow'); }); }, true); ``` ```javascript //index.min.js大概155行 // 回调主题配色 callbackTheme = function ($v, callback) { $v.contents().find('body').attr('data-theme', $.cookie('the_site_theme')); if (typeof callback === 'function') { setTimeout(callback, 200); } }; ``` 3、main.min.js有一个pageHide事件,就是你在关闭当前页面时会触发加载动画(这个会很快关闭,现在我也忘记是为啥要加这个了,反正是之前测试时候有用O(∩_∩)O哈哈~)。 ```javascript // main.min.js大概216行 window.onpagehide = function () { parent.$('#lyear-loading').fadeIn(1); }; ``` 4、还有一个就是增加了一个removeNode事件 ```javascript // main.min.js 大概208行 if (parent.$._data(parent.$('.mt-tab-content')[0], "events") === undefined || parent.$._data(parent.$('.mt-tab-content')[0], "events").removeNode === undefined) { var $loading = parent.$("#lyear-loading"); parent.$('.mt-tab-content').on('removeNode', function() { if ($loading.is(":visible")) { $loading.fadeOut('slow'); } }); } ``` 之前有小伙伴觉得时间太长,想要去掉这个,因为涉及的地方比较多,不熟悉js的小伙伴不太好操作删除。 这里可以将时间改短一下。 加载动画使用`fadeIn('fast')`载入,`fadeOut('slow')`淡出。回调这里用了`setTimeout(callback, 200);`延迟200毫秒执行。 slow是600毫秒,fast是200毫秒,还有延迟的200毫秒。 小伙伴们可以将slow改成fast,并将setTimeout里面的200改小。
上一篇:
iframe版本的Tab插件相关问题
下一篇:
webuploader使用时候的问题