預加載圖像加載的DIV

我遇到了問題。我正在研究一個CMS，它的名字是Dolphin。用幾句話來說，我創建了一個包含大量代碼的塊（jQuery，JavaScript，PHP，HTML，圖像...等）。我想要做的是顯示一個加載圖像，直到該塊的內容被完全加載。所以即使看起來很奇怪，我也需要DIV的預加載函數。我需要這樣做，因爲如果我不使用它，我可以看到div的構成緩慢，這很糟糕。你知道一個很好的jQuery或JavaScript函數可以幫助我嗎？只需在DIV中心加載一個圖像，直至其內容完全加載完畢。只要它被加載，它就會顯示出來。謝謝！預加載圖像加載的DIV

來源

2011-05-13 DiegoP.

你能發表一些HTML嗎？ – 2011-05-13 22:22:53

訣竅是將真正的div設置爲默認隱藏，並在其上面放置「Please wait」div。在繁重的編碼結尾添加一行隱藏「Please wait」div並顯示真正的div。對於所需的HTML

示例代碼：

<div id="pnlPleaseWait"> 
    Loading please wait... 
<div> 
<div id="pnlMain" style="display: none;"> 
    ....heavy stuff going on here... 
    ....heavy stuff going on here... 
    ....heavy stuff going on here... 
</div>

而且在繁重的處理結束了jQuery線：

$("#pnlPleaseWait").hide(); 
$("#pnlMain").show();

來源

2011-05-13 22:30:48

是否將圖像加載到具有'display：none'的塊中？如果他們不能將其定位在屏幕外並在完成時更改位置。 – jeroen 2011-05-13 22:34:11

@ jeroen好問題！猜猜簡單的圖像預加載（例如'var img = new Image（）; img.src =「myImage.jpg」;'是安全的方法。:-) – 2011-05-13 22:42:01

檢查其他問題：

How to show loading spinner in jQuery?

How do I display an animated image during Page Load using jQuery

等等

來源

2011-05-13 22:35:23 jotapdiez

預加載圖像加載的DIV

回答

相關問題