一直在网上没有看到预加载没有隐藏网页滚动条的案例,然后王英杰就写了一个,又他把加载到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滑下 -->
[日志] 响应式网站布局div盒子高度问题
2022.11.16 热度(0)[javascript] px单位转换为rem单位的封装js及手淘版的flexible.js
2020.08.26 热度(48)[javascript] jquery图片点击放大
2020.08.26 热度(45)