圖片預載入使用loading動畫,再載入內容
阿新 • • 發佈:2019-01-02
<!--頁面載入start--> <link rel="stylesheet" type="text/css" href="http://love.chengxumiao.net/wp-content/themes/Zenith/css/loader.min.css"> <script type="text/javascript"> // 等待所有載入 $(window).load(function(){ $('body').addClass('loaded'); $('#loader-wrapper .load_title').remove(); }); </script> <div id="loader-wrapper"> <div id="loader"></div> <div class="loader-section section-left"></div> <div class="loader-section section-right"></div> <div class="load_title">正在載入LoveFeel站點<br><span>V1.0</span></div> </div> <!--頁面載入end-->
http://love.chengxumiao.net/wp-content/themes/Zenith/css/loader.min.css
.chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999; } #loader { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #FFF; -webkit-animation: spin 2s linear infinite; -ms-animation: spin 2s linear infinite; -moz-animation: spin 2s linear infinite; -o-animation: spin 2s linear infinite; animation: spin 2s linear infinite; z-index: 1001; } #loader:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #FFF; -webkit-animation: spin 3s linear infinite; -moz-animation: spin 3s linear infinite; -o-animation: spin 3s linear infinite; -ms-animation: spin 3s linear infinite; animation: spin 3s linear infinite; } #loader:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #FFF; -moz-animation: spin 1.5s linear infinite; -o-animation: spin 1.5s linear infinite; -ms-animation: spin 1.5s linear infinite; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } #loader-wrapper .loader-section { position: fixed; top: 0; width: 51%; height: 100%; background: #1abc9c; z-index: 1000; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } #loader-wrapper .loader-section.section-left { left: 0; } #loader-wrapper .loader-section.section-right { right: 0; } .loaded #loader-wrapper .loader-section.section-left { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000); transition: all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000); } .loaded #loader-wrapper .loader-section.section-right { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000); transition: all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000); } .loaded #loader { opacity: 0; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .loaded #loader-wrapper { visibility: hidden; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: all 0.3s 1s ease-out; transition: all 0.3s 1s ease-out; } .no-js #loader-wrapper { display: none; } .no-js h1 { color: #222222; } #loader-wrapper .load_title { font-family: 'Open Sans'; color: #FFF; font-size: 19px; width: 100%; text-align: center; z-index: 9999999999999; position: absolute; top: 60%; opacity: 1; line-height: 30px; } #loader-wrapper .load_title span { font-weight: normal; font-style: italic; font-size: 13px; color: #FFF; opacity: 0.5; }
補充一下:如果只是圖片載入完成時程式碼可以這樣寫
$(function(){
var totalImg = $('img').length;
var currentImg = 0;
$('img').on('load',function(){
currentImg++;
console.log(currentImg)
if(currentImg === totalImg){
alert('所有圖片載入完畢');
//do something
}
})
})