加载等待动画

介绍

代码位于：/js/lightyear.js

var pageLoader = function($mode) {
	var $loadingEl = jQuery('#lyear-loading');
	    $mode      = $mode || 'show';
	if ($mode === 'show') {
		if ($loadingEl.length) {
			$loadingEl.fadeIn(250);
		} else {
			jQuery('body').prepend('<div id="lyear-loading"><div class="spinner-border text-primary" role="status"><span class="sr-only">Loading...</span></div></div>');
		}
	} else if ($mode === 'hide') {
		if ($loadingEl.length) {
			$loadingEl.fadeOut(250);
		}
	}
	return false;
};

调用起来也很简单

lightyear.loading('show'); // 显示
lightyear.loading('hide'); // 隐藏

一些改动

因为iframe版本的原因，在iframe里面的页面中使用，遮罩层只在iframe的范围，不太好看，这里稍微改下这个js，加上 parent 即可。

var pageLoader = function($mode) {
	var $loadingEl = parent.jQuery('#lyear-loading');
	    $mode      = $mode || 'show';
	if ($mode === 'show') {
		if ($loadingEl.length) {
			$loadingEl.fadeIn(250);
		} else {
			parent.jQuery('body').prepend('<div id="lyear-loading"><div class="spinner-border text-primary" role="status"><span class="sr-only">Loading...</span></div></div>');
		}
	} else if ($mode === 'hide') {
		if ($loadingEl.length) {
			$loadingEl.fadeOut(250);
		}
	}
	return false;
};

另一种改动方式

和消息通知一起改动，在不改动 lightyrea.js 的前提下，把 lightyear.js 、animate.css 和 bootstrap-notify.min.js 的引入挪到index.html页面中，iframe的页面里不再引入这些，在iframe里面调用加上 parent。

parent.lightyear.loading('show');
parent.lightyear.loading('hide');
parent.lightyear.notify('修改成功，页面即将自动跳转~', 'success');