首页日志正文

加到Cookie里预加载loading隐藏网页滚动条

日期：2020-5-14 12:16:53　人气：1105

一直在网上没有看到预加载没有隐藏网页滚动条的案例，然后王英杰就写了一个，又他把加载到cookie里了，现在只有第一次打开网页时加开动画，除非是清楚cookie缓存才能显示。 只接上代码，代码有注释，

最后感谢:jQuery插件库 上的 loading

直接上代码：各行代码都有注释，

<link rel="stylesheet" id="pageloader-css"  href="css/pageloader.css" type="text/css" media="all" />
<script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

<!--加载 -->
<div id="bonfire-pageloader" style="display: none;">    
<div class="bonfire-pageloader-icon">    
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">    
<path id="loading-12-icon" d="M291,82.219c0,16.568-13.432,30-30,30s-30-13.432-30-30s13.432-30,30-30S291,65.65,291,82.219z    
			 M261,404.781c-15.188,0-27.5,12.312-27.5,27.5s12.312,27.5,27.5,27.5s27.5-12.312,27.5-27.5S276.188,404.781,261,404.781z    
			 M361.504,113.167c-4.142,7.173-13.314,9.631-20.487,5.489c-7.173-4.141-9.631-13.313-5.49-20.487    
			c4.142-7.173,13.314-9.631,20.488-5.489C363.188,96.821,365.645,105.994,361.504,113.167z M188.484,382.851    
			c-14.348-8.284-32.697-3.368-40.98,10.98c-8.285,14.349-3.367,32.696,10.98,40.981c14.35,8.283,32.697,3.367,40.98-10.981    
			C207.75,409.482,202.834,391.135,188.484,382.851z M421.33,184.888c-8.368,4.831-19.07,1.965-23.901-6.404    
			c-4.832-8.368-1.965-19.07,6.404-23.902c8.368-4.831,19.069-1.964,23.9,6.405C432.566,169.354,429.699,180.056,421.33,184.888z    
			 M135.399,329.767c-8.285-14.35-26.633-19.266-40.982-10.982c-14.348,8.285-19.264,26.633-10.979,40.982    
			c8.284,14.348,26.632,19.264,40.981,10.98C138.767,362.462,143.683,344.114,135.399,329.767z M436.031,277.249    
			c-11.044,0-20-8.953-20-19.999c0-11.045,8.955-20.001,20.001-20.001c11.044,0,19.999,8.955,19.999,20.002    
			C456.031,268.295,447.078,277.249,436.031,277.249z M115.97,257.251c-0.001-16.57-13.433-30.001-30.001-30.002    
			c-16.568,0.001-29.999,13.432-30,30.002c0.001,16.566,13.433,29.998,30.001,30C102.538,287.249,115.969,273.817,115.97,257.251z    
			 M401.333,364.248c-10.759-6.212-14.446-19.97-8.234-30.73c6.212-10.759,19.971-14.446,30.731-8.233    
			c10.759,6.211,14.445,19.971,8.232,30.73C425.852,366.774,412.094,370.46,401.333,364.248z M135.398,184.736    
			c8.285-14.352,3.368-32.698-10.98-40.983c-14.349-8.283-32.695-3.367-40.981,10.982c-8.282,14.348-3.366,32.696,10.981,40.981    
			C108.768,204,127.115,199.082,135.398,184.736z M326.869,421.328c-6.902-11.953-2.807-27.242,9.148-34.145    
			s27.243-2.806,34.146,9.149c6.902,11.954,2.806,27.243-9.15,34.145C349.059,437.381,333.771,433.284,326.869,421.328z    
			 M188.482,131.649c14.352-8.286,19.266-26.633,10.982-40.982c-8.285-14.348-26.631-19.264-40.982-10.98    
			c-14.346,8.285-19.264,26.633-10.98,40.982C155.787,135.017,174.137,139.932,188.482,131.649z" />    
</svg>    
</div>    
</div>    
<!--加载 -->
<div><h1>王英杰博客预加载</h1></div>
<div style="height: 5000px; border: 1px solid red;"></div>
<div><h2>王英杰博客loading</h2></div>
<div style="text-align:center;">
<p> 加载 </p>
</div>
<script src="js/pageloader.js"></script>

pageloader.css

/***********************************************************
*** 自定义加载屏幕背景+图标颜色
************************************************************/
/* 加载屏幕背景色 */
#bonfire-pageloader {
	background-color:#1FB6DB;
}
/* 加载图标颜色 */
#bonfire-pageloader svg {
	fill:#fff;
}


/***********************************************************
*** 细节
************************************************************/
/* 页面加载器 */
#bonfire-pageloader {
	position:absolute;
	z-index:99999999999999;
	width:100%;
	height:1000%;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin-top:-50px;
}
.bonfire-pageloader-fade {
	opacity:0 !important;
	
	-webkit-transition: all .75s ease;
	-moz-transition: all .75s ease;
	-o-transition: all .75s ease;
	-ms-transition: all .75s ease;
	transition: all .75s ease;
}
.bonfire-pageloader-hide {
	display:none;
}

/* 加载图标 */
.bonfire-pageloader-icon {
	width:100px;
	height:100px;
	position:absolute;
	margin:100px 0 0 0;
	opacity:1;
	top:0;
	text-align: center;
	color: #fff;
}
.bonfire-pageloader-icon-hide {
	opacity:0 !important;
	
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-o-transition: all .25s ease;
	-ms-transition: all .25s ease;
	transition: all .25s ease;
}
#bonfire-pageloader svg {
    -webkit-animation:spin 2s linear infinite;
    -moz-animation:spin 2s linear infinite;
    animation:spin 2s linear infinite;
	width:100px;
	height:100px;
}
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
@-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }

/* 让我们在动画中给页面主体添加微妙的幻灯片 */
html {
	height:100%;
	
	-webkit-backface-visibility: hidden;
	
	-webkit-transform-origin:top;
	-moz-transform-origin:top;
	-ms-transform-origin:top;
	-o-transform-origin:top;
	transform-origin:top;
	
	-webkit-transition: all .75s ease;
	-moz-transition: all .75s ease;
	-o-transition: all .75s ease;
	-ms-transition: all .75s ease;
	transition: all .75s ease;
}
.bonfire-html-onload {	
	-webkit-transform: translateY(-50px);
	-moz-transform: translateY(-50px);
	-ms-transform: translateY(-50px);
	-o-transform: translateY(-50px);
	transform: translateY(-50px);

	-webkit-transition: all 0s ease;
	-moz-transition: all 0s ease;
	-o-transition: all 0s ease;
	-ms-transition: all 0s ease;
	transition: all 0s ease;
}

pageloader.js

// <!-- 淡入淡出前开始定位HTML -->
jQuery("html").addClass('bonfire-html-onload');
// 淡入淡出前开始定位HTML End

// 开始禁用浏览器滚动
/* 禁用触摸设备上的浏览器滚动 */
jQuery(document.body).on("touchmove", function(e) {
	e.preventDefault();
});

/* 禁用桌面上的浏览器滚动 */
var scrollPosition = [
	self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
	self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
];
var html = jQuery('html');
html.data('scroll-position', scrollPosition);
html.data('previous-overflow', html.css('overflow'));
html.css('overflow', 'hidden');
window.scrollTo(scrollPosition[0], scrollPosition[1]);
// 结束禁用浏览器滚动

// 开始加载淡出和HTML向下滑动
jQuery(window).load(function() {

	var cookiename = "isFirstVisited"; //定义cookie名子
	if ($.cookie(cookiename)) {  //如果已经有cookie名子
			$("div#bonfire-pageloader").remove();  //删除预加载的div
			
		/* 延迟0毫秒后，恢复浏览器滚动+淡出加载器背景+向下滑动页面 */
		setTimeout(function() {
			/* 在触摸设备上启用浏览器滚动 */
			jQuery(document.body).unbind('touchmove');
		
			/* 在桌面上启用浏览器滚动 */
			var html = jQuery('html');
			var scrollPosition = html.data('scroll-position');
			html.css('overflow', html.data('previous-overflow'));
			window.scrollTo(scrollPosition[0], scrollPosition[1]);
		
			/* 淡出加载器 */
			jQuery("#bonfire-pageloader").addClass('bonfire-pageloader-fade'); //背景透明 0.75s
		
			/* 向下滑动html */
			jQuery("html").removeClass('bonfire-html-onload'); //页面向下滑动
		
		}, 0);
		
		//---------
		
	} else { //如果没有cookie
		$.cookie(cookiename, "visted"); //添加cookie名子
		$('#bonfire-pageloader').attr('style','display:block;');//显示
		
		setTimeout(function() {
			/* 淡出加载图标 */
			jQuery(".bonfire-pageloader-icon").addClass('bonfire-pageloader-icon-hide'); //0.25s
		}, 500);

		/* 延迟250毫秒后，恢复浏览器滚动+淡出加载器背景+向下滑动页面 */
		setTimeout(function() {
			/* 在触摸设备上启用浏览器滚动 */
			jQuery(document.body).unbind('touchmove');

			/* 在桌面上启用浏览器滚动 */
			var html = jQuery('html');
			var scrollPosition = html.data('scroll-position');
			html.css('overflow', html.data('previous-overflow'));
			window.scrollTo(scrollPosition[0], scrollPosition[1]);

			/* 淡出加载器 */
			jQuery("#bonfire-pageloader").addClass('bonfire-pageloader-fade'); //背景透明 0.75s

			/* 向下滑动html */
			jQuery("html").removeClass('bonfire-html-onload'); //页面向下滑动

		}, 750);

		/* 延迟1000毫秒后，隐藏（不淡出）加载程序*/
		setTimeout(function() {
			/* 淡出后隐藏加载程序*/
			jQuery("#bonfire-pageloader").addClass('bonfire-pageloader-hide'); //给背景加class hide显示无

		}, 1500);

		//---------
	}

});
// <!-- 终端加载器淡出和HTML滑下 -->