我有一個OffDiv與加載GIF裏面象下面這樣：jQuery的預加載

<div id="OffDivAndLoadingContainer"> 
    <div id="OffDiv"> 
    </div> 
    <div id="LoadingContainer"> 
    </div> 
</div>

和他們的CSS：

div#OffDivAndLoadingContainer 
{ 
    display: none; 
    position: fixed; 
    top: 0px; 
    right: 0px; 
    z-index: 90000; 
    width: 100%; 
    height: 100%; 
    border: 3px solid green; 
} 
div#OffDiv 
{ 
    width: 100%; 
    height: 100%; 
    padding: 0px; 
    margin: 0px; 
    background-color: Blue; 
    filter: alpha(opacity=40); /* internet explorer */ 
    -khtml-opacity: 0.4; /* khtml, old safari */ 
    -moz-opacity: 0.4; /* mozilla, netscape */ 
    opacity: 0.4; /* fx, safari, opera */ 
    border: 1px solid back; 
} 
div#LoadingContainer 
{ 
    background: transparent url('/Images/Loading_Telerik_Vista.gif') no-repeat scroll center center; 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    width: 100%; 
    height: 100%; 
    padding: 0px; 
    margin: 0px; 
    border: 1px solid red; 
}

我設置的寬度和高度OffDiv象下面這樣：

function OffDivAndLoadingContainerOn() { 
    var x = screen.availWidth; 
    //alert(x); 
    $('div#OffDivAndLoadingContainer').css({ 'width': x }); 
    //alert($('div#OffDivAndLoadingContainer').css('width')); 
    var y = screen.availHeight; 
    //alert(y); 
    $('div#OffDivAndLoadingContainer').css({ 'height': y }); 
    //alert($('div#OffDivAndLoadingContainer').css('height')); 

    //alert('On'); 
    $('div#OffDivAndLoadingContainer').css({ 'display': 'block' }); 
}

我想slideDown OffDiv開始頁面加載並隱藏它時，頁面已完全裝！
Q＃1：哪個jquery CROSS BROWSER插件我應該用於這個目的嗎？
Q＃2：解決了Q＃1之後，我真的很想知道百分比預加載器（進度條）在頁面加載期間的工作情況（我認爲使用jquery插件更好）？你會告訴我一些示例與演示？

在此先感謝

來源

2011-06-02 MoonLight

所以這是爲了初始頁面加載？你是否正在加載需要處理的非常大的東西？ – natedavisolds 2011-06-02 23:31:36

嗨@natedavisolds：Q1-是初始頁面加載/ Q2-我不認爲/我只是想爲它做美容/除了我用jquery定義OffDiv的寬度和高度 - > availWidth和availHeight .. 。這樣OffDiv將完全填充我的頁面，並且在頁面加載期間，您可以看到OffDiv後面的內容，因爲它是不透明的！我編輯我的Q！ – MoonLight 2011-06-02 23:59:46

你需要顯示所有的CSS您的div的，而不是與你上面的代碼。

div#OffDivAndLoadingContainer 
{ 
    display: block; /* or just remove this line completely */ 
    /* the rest of the style */ 
}

一旦頁面加載，然後隱藏div。（請確保你正在加載jQuery）

$(function() { 
    $('div#OffDiv').slideDown(function() { 
     $(this).hide(); 
    }); 
});

這會產生你想要的效果。

建議

這種效應可能惹惱的人，因爲頁面會加載如此之快，他們將不得不等待的div走開。但是這是一個很好的學習經驗。這是另一個效果。而不是刪除加載div。你認爲你可以透露你正在加載的頁面的哪些部分？就像Google簡單的搜索屏幕或Apple的主頁一樣。

祝你好運。

來源

2011-06-03 01:13:50 natedavisolds

感謝您的回答 – MoonLight 2011-06-03 21:00:51

jQuery的預加載

回答

建議

相關問題