如何製作類似於Apple Mac的頁面預加載器頁面

如果您查看其網站上的Apple Mac頁面， http://www.apple.com/mac/ 當頁面加載時，它們的「body」在中心顯示圖像。頁面完全加載後，它們的內容會淡入。如果您使用Chrome或Safari並打開元素檢查器，則會在頁面加載時看到它們的正文獲得class="loaded revealed"。這會觸發內容淡入。如果刪除類，內容將淡出。如何製作類似於Apple Mac的頁面預加載器頁面

我正在尋找類似於我的網站的東西。我不希望整個內容不顯示，我仍然想要顯示頁眉和頁腳。所以基本上我想讓div#content_area在準備文檔時滑下來......唯一的問題是，他們沒有使用任何種類display:none;作爲他們的身體。他們對此有點小心，因爲如果JS文件失敗，內容仍然會顯示。

我該如何做到這一點？他們這樣做，他們必須是輕量級的，因爲任何人都可以寫類似

$(document).ready(function() { 
    $('div#content_area').attr(class, loaded revealed); 
});

所有我需要做的就是添加.slide()功能和隱藏的內容，直到頁面加載。

來源

2011-12-18 henryaaron

昨天我重新標記這個給你讓你多一點關注;看起來不是很有幫助。我的答案可以接受@ user1090389？ – 2011-12-20 18:30:35

這不是我正在尋找的。我會繼續努力，並會讓你知道...... – henryaaron 2011-12-21 01:53:28

也許改變你的問題。使用Javascript，您提供了一個解決方案。你特別尋求一個非黑客無JS的答案，以平滑降級腳本，而且沒有。 – 2011-12-21 02:02:08

人已經發現，蘋果有它的所有元素不透明度設置爲0，而且對身體負荷，它添加類的身體和使用這樣的

div{ 
opacity:0; 
} 
body.loaded div { 
opacity:1; 
transition:etc.etc.; 
}

一些基本的CSS這裏是我的版本，http://jsfiddle.net/dqUaX/1/

有什麼了不起，它是：

不透明度被認爲是CSS3屬性，因此，如果瀏覽器已經過時的內容不會隱藏。
我實際上使用jQuery將不透明度設置爲0，因此即使用戶有css3瀏覽器但禁用了JavaScript，內容仍會顯示。
由於您需要CSS3來隱藏div，我使用了一個巨大的數據URI作爲背景圖片，因此不需要加載。

很好很好不？

你必須把腳本<body>結束標記結束前...

來源

2011-12-30 05:24:01 henryaaron

恭喜。儘管如此，你仍然在使用JavaScript，並且Opacity完成了與「display：none」相同的功能。好奇......你能解釋一下＃3嗎？ – 2012-01-03 00:38:18

IE6和7無法渲染那麼長的數據URI ......就像我在我的問題中所說的那樣，一點JavaScript是好的。 – henryaaron 2012-01-03 14:59:06

將您的DIV內容設置到您想要的位置......設置您想成爲頂部佔位符的圖像（如果可能/必要，請使用絕對值）。

在CSS中使用z-index屬性來保持圖像高於其他圖像。

你做什麼然後是使IMG display:none;屬性，然後當他們的網頁正在加載，你可以打開它與jQuery ...所以用JS佔位符顯示和坐在上面...沒有JS，圖像佔位符是不可見的，並且用戶只是在加載時看到內容DIV。

這有道理嗎？

來源

2011-12-18 04:16:18

我仍然不明白內容將如何隱藏，即使圖像是在它的頂部？ – henryaaron 2011-12-18 04:17:34

確保疊加照片的塊容器不透明，並在頂部放置更大的z-index ...您可以使用jQuery通過抓取頁面的背景顏色來動態設置背景顏色CSS屬性，以使其匹配並且看起來毫無用處。 – 2011-12-18 04:22:24

只是爲了重申，重點是如果你想內容正確顯示沒有JS，離開它應該在哪裏......沒有滑動，沒有負邊距，沒有隱形或顯示：無......只是爲了使一個不透明的覆蓋如果用戶啓用了JS，並在頁面加載完成時將其滑開，最終結果是相同的，因爲它看起來像您的內容剛剛到達。 :) – 2011-12-18 04:24:52

如何製作類似於Apple Mac的頁面預加載器頁面

回答

相關問題