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

Line 1: Line 1:
var _LoadingHtml = '<div id="loadingDiv" style="position:absolute;left:0;top:0;width:calc(100%);height:100%;background-color: #E6E6E6;z-index: 999999999;margin:0;padding:0;"><img style="position: absolute;top: calc(50% - 90px);left:calc(50% - 86px);height: 180px;width: 172px;z-index:9999999991;" src="https://static.igem.org/mediawiki/2018/0/0b/T--BIT-China--iGEM2018-A_loading.gif"></div>';
+
//在页面未加载完毕之前显示的loading Html自定义内容
 +
var _LoadingHtml = '<div id="loadingDiv" style="position:absolute;left:0;top:0;width:calc(100%);height:100%;background-color: #E6E6E6;z-index: 9999;margin:0;padding:0;"><img style="position: absolute;top: calc(50% - 90px);left:calc(50% - 86px);height: 180px;width: 172px;z-index:999999;" src="https://static.igem.org/mediawiki/2018/0/0b/T--BIT-China--iGEM2018-A_loading.gif"></div>';
 +
//呈现loading效果
 
document.write(_LoadingHtml);
 
document.write(_LoadingHtml);
 +
 +
//监听加载状态改变
 
document.onreadystatechange = completeLoading;
 
document.onreadystatechange = completeLoading;
 +
 +
 +
//加载状态为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;  
+
             document.documentElement.scrollTop = 0; //ie下           
             document.body.scrollTop = 0;   
+
             document.body.scrollTop = 0;  //非ie   
 
         }
 
         }
 +
 +
 +
 
         $(window).load(function () {
 
         $(window).load(function () {
 
             $('#loading_all').delay(300).hide(0);
 
             $('#loading_all').delay(300).hide(0);
 
             setTimeout(function () {
 
             setTimeout(function () {
                 $('#ibody').removeClass("scoll_dis");
+
                 $('body').removeClass("scoll_dis");
 +
 
 
             }, 300);
 
             }, 300);
 
             $.fn.fullpage.setAllowScrolling(false, 'down');
 
             $.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');
Line 23: Line 42:
  
 
         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;"       
 
         }, 4400);
 
         }, 4400);
 
     }
 
     }
 +
 
     function newFunction() {
 
     function newFunction() {
 
         return false;
 
         return false;
 
     }
 
     }
 
}
 
}

Revision as of 15:18, 16 October 2018

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

var _LoadingHtml = '
<img style="position: absolute;top: calc(50% - 90px);left:calc(50% - 86px);height: 180px;width: 172px;z-index:999999;" 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;
   }

}