万能页面加载loading

首先引入任意版本的jquery文件

准备一张好看的gif图当作加载页面
css样式

.loader-wrapper {
  height: 100vh;
  width: 100vw;
  display: flex;
  background-color: #ffffff;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: fixed;
  z-index: 9;
  top: 0; }

html5

<div class="loader-wrapper" id="loader-wrapper">
		<img src="images/loading.gif" width="200" height="" alt="loading" />
    </div>

js文件

(function($){
"use strict";

/*========== Loader start ================*/
$(window).on('load', function() {
	$('#loader-wrapper').fadeIn();
	setTimeout(function() {
		$('#loader-wrapper').fadeOut();
	}, 500);
});
})(jQuery);

ok 这样就好了