网页预载就是网页提前加载，这个页面用户必须要预览的
<br /><!DOCTYPE html><br /><html lang="en"><br /><head><br /> <meta charset="UTF-8"><br /> <title>Title</title><br /> <style><br /> .chromeframe {<br /> margin: 0.2em 0;<br /> background: #ccc;<br /> color: #000;<br /> padding: 0.2em 0;}<br /> #loader-wrapper {<br /> position: fixed;<br /> top: 0;<br /> left: 0;<br /> width: 100%;<br /> height: 100%;<br /> z-index:999999;}<br /> #loader {<br /> display: block;<br /> position: relative;<br /> left: 50%;<br /> top: 50%;<br /> width: 150px;<br /> height: 150px;<br /> margin: -75px 0 0 -75px;<br /> border-radius: 50%;<br /> border: 3px solid transparent;<br /> /* COLOR 1 */<br /> border-top-color: #FFF;<br /> -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */<br /> -ms-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */<br /> -moz-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */<br /> -o-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */<br /> animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */<br /> z-index:1001;}<br /> #loader:before {<br /> content: "";<br /> position: absolute;<br /> top: 5px;<br /> left: 5px;<br /> right: 5px;<br /> bottom: 5px;<br /> border-radius: 50%;<br /> border: 3px solid transparent;<br /> /* COLOR 2 */<br /> border-top-color: #FFF;<br /> -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */<br /> -moz-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */<br /> -o-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */<br /> -ms-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */<br /> animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */}<br /> #loader:after {<br /> content: "";<br /> position: absolute;<br /> top: 15px;<br /> left: 15px;<br /> right: 15px;<br /> bottom: 15px;<br /> border-radius: 50%;<br /> border: 3px solid transparent;<br /> border-top-color: #FFF;<br /> /* COLOR 3 */<br /> -moz-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */<br /> -o-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */<br /> -ms-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */<br /> -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */<br /> animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */}<br /><br /><br /> @-webkit-keyframes spin {<br /> 0%{<br /> -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */<br /> -ms-transform: rotate(0deg); /* IE 9 */<br /> transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */<br /> }100%{<br /> -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */<br /> -ms-transform: rotate(360deg); /* IE 9 */<br /> transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */}<br /> }<br /><br /> @keyframes spin {<br /> 0%{<br /> -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */<br /> -ms-transform: rotate(0deg); /* IE 9 */<br /> transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */<br /> }100%{<br /> -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */<br /> -ms-transform: rotate(360deg); /* IE 9 */<br /> transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */}<br /> }<br /><br /><br /> #loader-wrapper .loader-section {<br /> position: fixed;<br /> top: 0;<br /> width: 51%;<br /> height: 100%;<br /> background: #1abc9c; /* Old browsers */<br /> z-index: 1000;<br /> -webkit-transform: translateX(0); /* Chrome, Opera 15+, Safari 3.1+ */<br /> -ms-transform: translateX(0); /* IE 9 */<br /> transform: translateX(0); /* Firefox 16+, IE 10+, Opera */}<br /> #loader-wrapper .loader-section.section-left {left: 0;}<br /> #loader-wrapper .loader-section.section-right {right: 0;}<br /><br /> /* Loaded */<br /> .loaded #loader-wrapper .loader-section.section-left {<br /> -webkit-transform: translateX(-100%); /* Chrome, Opera 15+, Safari 3.1+ */<br /> -ms-transform: translateX(-100%); /* IE 9 */<br /> transform: translateX(-100%); /* Firefox 16+, IE 10+, Opera */<br /> -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);<br /> transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);}<br /> .loaded #loader-wrapper .loader-section.section-right {<br /> -webkit-transform: translateX(100%); /* Chrome, Opera 15+, Safari 3.1+ */<br /> -ms-transform: translateX(100%); /* IE 9 */<br /> transform: translateX(100%); /* Firefox 16+, IE 10+, Opera */<br /> -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);<br /> transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);}<br /> .loaded #loader {<br /> opacity: 0;<br /> -webkit-transition: all 0.3s ease-out;<br /> transition: all 0.3s ease-out;}<br /> .loaded #loader-wrapper {<br /> visibility: hidden;<br /> -webkit-transform: translateY(-100%); /* Chrome, Opera 15+, Safari 3.1+ */<br /> -ms-transform: translateY(-100%); /* IE 9 */<br /> transform: translateY(-100%); /* Firefox 16+, IE 10+, Opera */<br /> -webkit-transition: all 0.3s 1s ease-out;<br /> transition: all 0.3s 1s ease-out;}<br /> /* JavaScript Turned Off */<br /> .no-js #loader-wrapper {display: none;}<br /> .no-js h1 {color: #222222;}<br /> #loader-wrapper .load_title {<br /> font-family:'Open Sans';<br /> color:#FFF; font-size:19px; width:100%; text-align:center; z-index:9999999999999; position:absolute; top:60%; opacity:1; line-height:30px; }<br /> #loader-wrapper .load_title span { font-weight:normal; font-style:italic; font-size:13px; color:#FFF; opacity:0.5;}<br /><br /> </style><br /></head><br /><body><br /><div id="loader-wrapper"><br /> <div id="loader"></div><br /> <div class="loader-section section-left"></div><br /> <div class="loader-section section-right"></div><br /> <div class="load_title">正在加载LoveFeel站点<br><span>V1.0<br><button class="btn">结束预加载</button></div><br /><br /></div><br /><!--页面加载end--><br /><script type="text/javascript" src="jquery.js"></script><br /><script type="text/javascript"><br /> // 等待所有加载<br /> $(window).load(function(){<br /> $('body').addClass('loaded');<br /> $('#loader-wrapper .load_title').remove();<br /> });<br /> /*<br /> //在这里我们可以通过判断json数据是否加载成功然后在关闭预加载功能<br /> $(window).load(function(){<br /> $('body').addClass('loaded').Chameleon({<br /> 'current_item':'hoveralls',<br /> 'json_url':'../Envato/items.json'<br /> });<br /> $('#loader-wrapper .load_title').remove();<br />});<br /> * */<br /></script><br /><br /></body><br /></html> 