預覽並在查看頁面之前運行jQuery/javascript

我正在開發一個項目，其中有很多jQuery正在進行。所以當我進入頁面時，我可以看到 jQuery正在運行（例如，在jQueryUI加載之前，頁面上的元素仍然顯示爲正常的html元素：S），所以最初它看起來很醜陋然而，一旦所有的JS加載並執行，它看起來「很好」。預覽並在查看頁面之前運行jQuery/javascript

這不僅僅是一個預加載圖片或其他任何東西，我想運行jQuery代碼，但「隱藏」它的訪客，所以一旦打開頁面，它看起來很好「馬上或顯示黑屏說「加載...」，直到jQuery完成運行。

看看這裏：http://www.filamentgroup.com/，雖然我不確定在顯示它之前是否真的運行了網站的javascript，但它顯示了一個黑屏的說法，「Loading ...」..我懷疑這是在大型網絡應用程序，如SlideRocket會發生什麼，雖然它使用閃光燈...：S

來源

2011-09-14 meltuhamy

我個人會離開這個網站。除非我沒有選擇，否則我不是在這裏查看purty purty加載映像（請參閱ExtJS/Dojo API文檔）。我更希望您可以逐個加載頁面，或者針對明顯的性能問題提出不同的解決方案，而不是加載您的加載圖像。但那是我。我相信有人會很快與現成的jQuery片斷。 – ZenMaster

你自己回答了這個問題的窗口負荷。有一些隱藏頁面的加載屏幕，直到所有的jQuery運行。

嘗試如下所示。

這正好在你的頁面的頂部：

<div id="loadingMask" style="width: 100%; height: 100%; position: fixed; background: #fff;">Loading...</div>

這是你的jQuery：

$(document).ready(function() { 

    /* 
    * ... all of your jQuery ... 
    */ 

    // At the bottom of your jQuery code, put this: 
    $('#loadingMask').fadeOut(); 
});

來源

2011-09-14 15:13:01

打我30秒！ – rlemon

天才。奇蹟般有效。簡短，精確，有效。謝謝。 – meltuhamy

@Matt布拉德利它對我也很好，謝謝！但是，你也許有一些想法：如何在第一次加載時不讓頁面快門一秒鐘？嘗試進入我的網站：http://soulstudio.eu - 你可以在那裏看到，第一次進入整個頁面閃爍一秒鐘。如何避免它？ – user3267302

總結所有的jQuery要「預加載」到這一點：

$(window).load(function() { 
    //Your jQuery here 
});

或替代，不是所有的你的jQuery代碼包裝內。相反，把你的jQuery DOM更改爲

$(document).ready(function(){ 
    //jQuery 
}))

然後爲您的所有網站內容包裝。

<div id="everything-wrapper"> 
    <!-- put your body here --> 
</div>

，並設置你的CSS

#everything-wrapper { 
    display : none; 
}

顯示器無法比擬的，然後用像早期

$(window).load(function() { 
    $("#everything-wrapper").show(); 
    // or 
    $("#everything-wrapper").fadeIn("fast"); 
    // to be fancy with it 
});

來源

2011-09-14 15:03:09 SomeShinyObject

你讀過這個問題了嗎？大部分頁面都被加載，然後運行jQuery和jQuery UI，將標準按鈕更改爲jQuery UI按鈕和其他此類工件。 –

您是否閱讀過我的解決方案？試試看看它是否無效。我敢打賭它確實。 – SomeShinyObject

你確實明白，我評論過那裏有沒有你的第一個解決方案，對吧？ –

我想有一個疊加的，那麼當JQuery的負載通過您的靜態CSS和HTML的一部分

$(document).ready()可以隱藏覆蓋

來源

2011-09-14 15:13:37 rlemon

chr的答案istopher最有可能是FilamentGroup的做法。您可以將JavaScript「預加載」，它與頁面的其餘部分內聯加載，並且由於它通常比頁面的其餘部分大，需要更長時間才能下載。你不能先讓JavaScript加載，那不是它的工作方式。

但是，使其工作的原理是在CSS中隱藏頁面（或者使用內聯樣式，因爲CSS仍然需要加載），然後一旦JavaScript中的所有內容都準備好再次顯示出來。如果您注意到頁面顯示（無）與FilamentGroup上顯示的JavaScript加載之間存在差距。這是因爲他們隱藏了頁面，JavaScript加載器加載，然後一旦JavaScript的其餘部分完成，它隱藏加載器並顯示頁面。

來源

2011-09-14 15:15:25 Alex

老兄，我給你做了一個樣本。我希望你喜歡。我在我自己的網站上使用類似的東西。 http://jsfiddle.net/jMVVf/

來源

2011-09-14 15:40:59 frosty

我在IE8頁面加載過程中出現了一個類似的問題，出現了一個類似的問題。我使用的解決方案是將容器的可見性更改爲隱藏在css的第1行。然後在jquery文件的末尾顯示該元素。如果CSS和jquery開始爭論，直到參數被解析，元素纔會顯示。

來源

2012-11-18 19:50:08 matt

預覽並在查看頁面之前運行jQuery/javascript

回答

相關問題