在樣式表加載並執行之前，如何隱藏用戶的內容？

我正在使用jQuery插件來滑動窗格的內容。在大約400ms的時間裏，所有的頁面元素都會閃爍起來（文本，圖像等），從而形成亂七八糟的亂碼混亂......你可以說這是一個喧鬧。在樣式表加載並執行之前，如何隱藏用戶的內容？

然後樣式表出現並排序。但爲了專業和完美主義的緣故，我想隱藏所有內容，直到樣式表加載完畢。

$（document）.ready是不合適的，因爲繁榮......這是我的問題。 onload（）不工作，因爲cuz然後所有的內容被隱藏，直到頁面完全呈現（圖像... 4,5,6秒... zzzzzzzz ....）

所以沒有人知道什麼選項是？（在頁面加載過程中是否可以播放Ipanema midi中的Girl？：p）

來源

2010-06-28 Kyle

什麼'$（文件）。就緒（函數（）{}）;'的問題？難道你不能默認隱藏你的幻燈片，並在你準備好的功能重新打開它嗎？ – kamasheto 2010-06-28 09:51:04

Maḥmūd！不知何故，我在Stack上的第一個問題是一個完整的蕭條。當然，這就是答案！你就像Hodja帶着你的簡單問題帶給我洞察力。太糟糕了，我無法選擇評論作爲答案。 – Kyle 2010-06-28 10:27:07

你可以有樣式表隱藏特定元素display: none，直至需要它們。

但是，如果直接在樣式表中執行此操作，您將遇到可訪問性問題，如在沒有JavaScript可用的瀏覽器上，內容將根本不會顯示。解決的辦法是鍵隱藏性對從JavaScript的設置之前任何延遲的元素加載一個變量，例如，作爲一類上<body>：

<head> 
    <style type="text/css"> 
     body.withjs .deferred { display: none; } 
    </style> 
</head> 
<body> 
    <script type="text/javascript"> 
     $('body').addClass('withjs'); 

     $(document).ready(function() { 
      // set up slideyness 
     }); 
    </script> 

    <p>Content that loads normally...</p> 

    <div id="slideything" class="deferred"> 
     content 
    </div> 
</body>

來源

2010-06-28 09:57:25 bobince

你好！這看起來像兩全其美！但是，它讓我回到了我的老問題：在彼此之上有一堆內容層。我不知道爲什麼。我幾乎完全複製了你的代碼。內聯代碼的加載方式與文檔中介紹的不同嗎？ – Kyle 2010-06-28 10:48:38

你能舉一個例子嗎（例如pastebin等）？任何具有「延遲」類的應用程序都不應該在啓用JS的瀏覽器上顯示;您可以在文檔準備就緒時設置延遲元素的定位和隱藏/顯示。如果您只是在本地文件系統上進行測試，請注意，IE默認關閉JavaScript。 – bobince 2010-06-28 11:04:37

完美！得到它的工作。感謝bobince！爲你的有你的蛋糕和吃它太解決方案。 – Kyle 2010-06-28 20:13:42

Accessibility-wise，你不應該假設你的樣式表實際上被客戶端使用。您的內容應該可以在沒有樣式表的情況下訪問，而樣式表只應該增強演示文稿 - 這是Progressive Enhancement。

如果可訪問性較差，可以在包裝div或body中隱藏整個頁面（或至少brouhaha）display: none。

來源

2010-06-28 09:51:27 MaxVT

Heyo Max！感謝有關漸進式增強的文章。目前，我正在使用display：hidden，但是我會讓它成爲一個近期的項目，用一些冷酷的蘇聯控制論風格的基於文本的網站來優雅地降級。你用顯示回答我的問題：無。 – Kyle 2010-06-28 10:29:07

隱藏將要通過JavaScript處理的內容是非常容易的。您只需使用JavaScript自行生成內容，或將其樣式設置爲display: none。

問題是無障礙。您通常希望這些內容可用於不支持所有高級功能的工具，包括舊版瀏覽器，搜索引擎，手機，屏幕閱讀器......這就是阻止您執行第一段中提到的內容的原因。

我的建議是改變你的CSS，使內容看起來很好，即使JavaScript禁用。

（至於你的最新要求，您可以使用jQuery.ipanema-girl.js plugin。）

來源

2010-06-28 09:55:18

夥計！我得到了RickRoll'd！阿爾瓦羅，偉大的建議！原來，「顯示：隱藏」不是一回事。「顯示：無」或「可見性：隱藏」。但是如果我有15個聲望點的話，對於所有其他的好建議我都會投你一票。 F！誰沒有15點聲望點？ – Kyle 2010-06-28 10:31:23

我修正了CSS，謝謝指出。歡迎來到Stack Overflow。如果你剛剛回來，你很容易得到15pt ;-) – 2010-06-28 10:42:37

在樣式表加載並執行之前，如何隱藏用戶的內容？

回答

相關問題