Difference between revisions of "Template:BIT-China/js/base-loading"

(Created page with "//在页面未加载完毕之前显示的loading Html自定义内容 var _LoadingHtml = '<div id="loadingDiv" style="position:absolute;left:0;top:0;width:calc(100%);height:100...")
 
Line 1: Line 1:
 
//在页面未加载完毕之前显示的loading Html自定义内容
 
//在页面未加载完毕之前显示的loading Html自定义内容
var _LoadingHtml = '<div id="loadingDiv" style="position:absolute;left:0;top:0;width:calc(100%);height:100%;background-color: #E6E6E6;z-index: 9999999999999;margin:0;padding:0;"><img style="position: absolute;top: calc(50% - 90px);left:calc(50% - 86px);height: 180px;width: 172px;z-index:9999999999999;" src="img/T--BIT-China--iGEM2018-A_loading.gif"></div>';
+
var _LoadingHtml = '<div id="loadingDiv" style="position:absolute;left:0;top:0;width:calc(100%);height:100%;background-color: #E6E6E6;z-index: 9999999999999;margin:0;padding:0;"><img style="position: absolute;top: calc(50% - 90px);left:calc(50% - 86px);height: 180px;width: 172px;z-index:9999999999999;" src="https://static.igem.org/mediawiki/2018/0/0b/T--BIT-China--iGEM2018-A_loading.gif"></div>';
 
//呈现loading效果
 
//呈现loading效果
 
document.write(_LoadingHtml);
 
document.write(_LoadingHtml);
Line 10: Line 10:
 
//加载状态为complete时移除loading效果
 
//加载状态为complete时移除loading效果
 
function completeLoading() {
 
function completeLoading() {
   
+
 
   
+
 
   
+
 
   
+
 
     document.documentElement.style.overflow='hidden';
+
     document.documentElement.style.overflow = 'hidden';
 
     if (document.readyState == "complete") {
 
     if (document.readyState == "complete") {
       
+
 
         window.onbeforeunload = function(){          
+
         window.onbeforeunload = function () {
 
             document.documentElement.scrollTop = 0;  //ie下             
 
             document.documentElement.scrollTop = 0;  //ie下             
 
             document.body.scrollTop = 0;  //非ie     
 
             document.body.scrollTop = 0;  //非ie     
 
         }
 
         }
       
 
  
  
         $(window).load(function(){  
+
 
                 $('#loading_all').delay(300).hide(0);  
+
         $(window).load(function () {
                 setTimeout(function(){  
+
             $('#loading_all').delay(300).hide(0);
                    $('body').removeClass("scoll_dis");  
+
             setTimeout(function () {
                   
+
                $('body').removeClass("scoll_dis");
                 },300);  
+
 
                $.fn.fullpage.setAllowScrolling(false, 'down');
+
             }, 300);
            });
+
            $.fn.fullpage.setAllowScrolling(false, 'down');
       
+
        });
         setTimeout(function(){
+
 
 +
         setTimeout(function () {
  
  
 
             var loadingMask = document.getElementById('loadingDiv');
 
             var loadingMask = document.getElementById('loadingDiv');
              loadingMask.classList.add('imgA-nav-gradient-back');  
+
            loadingMask.classList.add('imgA-nav-gradient-back');
              document.documentElement.style.overflowY='auto';
+
            document.documentElement.style.overflowY = 'auto';
         },3000);
+
         }, 3000);
 +
 
 +
        setTimeout(function () {
  
        setTimeout(function(){
 
                    
 
 
             var loadingMask = document.getElementById('loadingDiv');
 
             var loadingMask = document.getElementById('loadingDiv');
                loadingMask.classList.remove('imgA-nav-gradient-back');  
+
            loadingMask.classList.remove('imgA-nav-gradient-back');
                loadingMask.parentNode.removeChild(loadingMask);
+
            loadingMask.parentNode.removeChild(loadingMask);
                $.fn.fullpage.setAllowScrolling(true, 'down');
+
            $.fn.fullpage.setAllowScrolling(true, 'down');
              // body.style="overflow-x:hidden;"         
+
            // body.style="overflow-x:hidden;"         
         },4400);
+
         }, 4400);
 
     }
 
     }
  

Revision as of 11:12, 14 October 2018

//在页面未加载完毕之前显示的loading Html自定义内容

var _LoadingHtml = '
<img style="position: absolute;top: calc(50% - 90px);left:calc(50% - 86px);height: 180px;width: 172px;z-index:9999999999999;" src="T--BIT-China--iGEM2018-A_loading.gif">
';

//呈现loading效果 document.write(_LoadingHtml);

//监听加载状态改变 document.onreadystatechange = completeLoading;


//加载状态为complete时移除loading效果 function completeLoading() {



   document.documentElement.style.overflow = 'hidden';
   if (document.readyState == "complete") {
       window.onbeforeunload = function () {
           document.documentElement.scrollTop = 0;  //ie下            
           document.body.scrollTop = 0;  //非ie    
       }


       $(window).load(function () {
           $('#loading_all').delay(300).hide(0);
           setTimeout(function () {
               $('body').removeClass("scoll_dis");
           }, 300);
           $.fn.fullpage.setAllowScrolling(false, 'down');
       });
       setTimeout(function () {


           var loadingMask = document.getElementById('loadingDiv');
           loadingMask.classList.add('imgA-nav-gradient-back');
           document.documentElement.style.overflowY = 'auto';
       }, 3000);
       setTimeout(function () {
           var loadingMask = document.getElementById('loadingDiv');
           loadingMask.classList.remove('imgA-nav-gradient-back');
           loadingMask.parentNode.removeChild(loadingMask);
           $.fn.fullpage.setAllowScrolling(true, 'down');
           // body.style="overflow-x:hidden;"         
       }, 4400);
   }
   function newFunction() {
       return false;
   }

}