JQuery加載動畫：動畫出現之前仍有很大差距

我有一個大型頁面，DOM需要一段時間才能完全加載。我認爲這將是很好的有一個小加載動畫出現而頁面加載，所以我實現了這個：JQuery加載動畫：動畫出現之前仍有很大差距

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script src="https://github.com/Modernizr/Modernizr/raw/master/modernizr.js"></script> 
    <script> 
     // Wait for window load 
     $(window).load(function() { 
      // Animate loader off screen 
      $("#wait").animate({ 
       top: -200 
      }, 1500); 
     }); 
    </script> 

<body> 
<div id="wait"> 
<img src="/assets/images/ajax-loader.gif" /> 
</div>

（發現here）

它的工作原理，但只在最後一刻，當DOM大約是已經加載的五分之四。希望是否有人知道更好的方法來做到這一點？

來源

2012-06-28 MeltingDog

你裝什麼類型的數據???它是文字或圖像 – Sibu

@Sibu只是一個很大的基本網頁，有1個大圖像和一些HTML - 沒什麼特別的 – MeltingDog

而不是使用$（窗口）.load（）嘗試$（文件）。就緒（），$ nornally（窗口）.load（）的裝載大圖像

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script src="https://github.com/Modernizr/Modernizr/raw/master/modernizr.js"></script> 
    <script> 
     // Wait for window load 
     $(document).ready(function() { 
      // Animate loader off screen 
      $("#wait").animate({ 
       top: -200 
      }, 1500); 
     }); 
    </script> 

<body> 
<div id="wait"> 
<img src="/assets/images/ajax-loader.gif" /> 
</div>

編輯在正常使用 如果您加載一個大的圖像我修改了代碼，希望這將幫助你

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script> 
function showLoading(){ 
    var $loading = $(".loading"); 
    var windowH = $(window).height(); 
    var windowW = $(window).width(); 

    $loading.css({ 
    position:"fixed", 
    left: ((windowW - $loading.outerWidth())/2 + $(document).scrollLeft()), 
    top: ((windowH - $loading.outerHeight())/2 + $(document).scrollTop()) 
    }).show(); 
} 

function hideLoading(){ 
    $(".loading").hide(); 
} 

$(function(){ 
     showLoading(); 

     $("#Iframe").load(function(){ 
     hideLoading(); 
     }).attr("src", "http://www.somesite.com/images/Purple-Flowers-Wallpaper.jpg"); 

    }); 
</script> 

<div id="dialog-box"> 
    <iframe id="Iframe" src="javascript:void(0);" height="500px" width="800px" ></iframe> 
    </div> 

<div class="loading"> 
     <br /><br /> 
     <div>Loading...</div> 
    </div>

來源

2012-06-28 04:38:15 Sibu

感謝詩巫，但它並沒有真正有所作爲 - 與上面的行爲相同 – MeltingDog

JQuery加載動畫：動畫出現之前仍有很大差距

回答

相關問題