如何先加載網站模板，內容晚點

這裏是示例網站：https://www.mapbox.com/plans/或http://facebook.com/ 我很好奇他們如何使用模板只對網站進行預先視覺化，並稍後加載內容。我所能想象到的只是首先隱藏所有內容，並在加載完所有內容後顯示它。這是正確的軌道？任何想法都會有所幫助，謝謝。如何先加載網站模板，內容晚點

mapbox-screenshot 這是您第一次看到您打開http://www.mapbox.com並看到內容後。 enter image description here 這就是我想知道的過渡。如果使用ajax，那麼最初的菜單或文本怎麼樣？謝謝:)

來源

2014-11-04 yuhua

沒有隱藏，只是阿賈克斯。 – Dylan 2014-11-04 06:30:37

我明白你在說什麼。他們正在等待字體，並避免他們隱藏的小故障，直到js表示通過將類user-loaded放在body元素上準備就緒。

.show-in-loaded { opacity: 0; } 
.user-loaded .show-in-loaded { opacity: 1; }

然後什麼都有字體，他們通過把show-in-loaded隱藏它。

在某些js函數中指示它們已準備就緒狀態。

$('body').addClass('user-loaded');

來源

2014-11-04 07:03:20 Dylan

很酷！我遵循你的回答，並找出過渡的CSS和善意的評論。 :) /*加載前的面罩元素 ---------------------------------------- --------------- */ .show-in-loaded {opacity：0; } .user-loaded .show-in-loaded {opacity：1; } – yuhua 2014-11-04 07:10:49

我不積極，他們也有很多代碼來阻止模仿等，但字體是我們看到這個的常見原因。 http://help.typekit.com/customer/portal/articles/6787-font-events這裏的typekit版本。 – Dylan 2014-11-04 07:18:29

頁面加載後加載的任何東西都必須是ajax調用。

當您從服務器發送數據時，數據將被渲染，並且樣式將根據資源獲取的速度完成。

當您從ajax調用請求數據時，會在頁面加載後發送和處理數據，但是您也可以與頁面加載同步，因爲它是異步調用。

來源

2014-11-04 06:37:54

是的，所以包含文本的ajax？我的意思是在整個加載過程中，我只能看到一些像模板一樣的顏色塊，然後立即顯示文本。也許我在屏幕截圖上演示了這個過程 – yuhua 2014-11-04 06:39:49

也可以隱藏起來，等待字體顯示出來。 – Dylan 2014-11-04 06:44:07

是的，你是對的，這可以是一個很好的方法來顯示文字只有當所有的字體和圖像正確加載 – 2014-11-04 07:04:15

如何先加載網站模板，內容晚點

回答

相關問題