在jQuery的$（document）.ready（）之前隱藏元素的可訪問方法？

我有一個大型調查，通過將它安排到各個部分並使用一個手風琴菜單翻閱每個部分，我已經使jQuery更加可用。

問題是，當$(document).ready()發生火災並將所有東西壓縮成一個手風琴菜單時，都會有一個明顯的突然發生。也就是說，在$(document).ready()之前，你可以看到整個調查。

我沒有考慮設置#surveyForm在CSS display: none;和#surveyForm.active到display: block;而是創建了一個新的問題：

瀏覽器未啓用將永遠不會看到＃surveyForm.active，所以他們將無法給JavaScript使用調查。

任何想法？

乾杯

-Iain

來源

2010-08-25 Iain Fraser

T每個人都在。一些偉大的答案在這裏，很大的努力:) – 2010-08-27 01:11:32

這是漸進增強solution我用這種情況。

來源

2010-08-25 08:22:18

這工作完美！幹得好，謝謝你:) – 2010-08-27 01:11:14

我會堅持使用css display:none解決方案。要解決此問題no javascript你可能會考慮使用此：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     // fade in? 
    }); 
</script> 
<noscript> 
    <div>foobar!</div> 
</noscript>

來源

2010-08-25 07:03:21 jAndy

假設什麼在「foobar！」插槽是你想要顯示的內容，這不意味着在HTML中有兩份調查副本，或者我在這裏錯過了你的意圖？ – Chris 2010-08-25 09:55:26

我還沒有嘗試過這一點，但也許你可以在<noscript>標籤包裹的內容。那些禁用Javascript的人會一直看到內容。那些使用Javascript將不會看到內容。然後使用JQuery刪除<noscript>標籤，從而使內容對於那些使用Javascript的人可見。

編輯：

下面的例子幾乎工作。我想要的是刪除<noscript>標籤，同時保留其內容。但是，代碼最終會轉義HTML。這個想法的作品，但我不知道如何實現它正確—也許別人可以提供一些線索就可以了：

<noscript> 
    <p>Display me!</p> 
</noscript> 
<script type="text/javascript" language="javascript"> 
    $(document).ready(function() { 
     $('noscript').contents().unwrap(); 
    }); 
</script>

這裏就是我想獲得：

<p>Display me!</p>

這裏是我的實際上得到：

&lt;p&gt;Display me!&lt;/p&gt;

編輯2：

經過多一點調查後，unwrap()方法對非<noscript>標記正常工作：例如，它適用於<div>的內容。我不確定這裏的解決方案是什麼。這大概是與瀏覽器解釋<noscript>的方式有關。

來源

2010-08-25 07:05:39 Mike

純粹的解決方案 - 當你看到它時很明顯。它工作嗎？ – belugabob 2010-08-25 07:21:22

它不像乾淨利落的Javascript，但是你可以直接在你的手風琴內容後添加一個Javascript代碼片段來初始化手風琴並隱藏需要隱藏的部分。淨效應應該完全消除「捕捉」並保持表單可以訪問非JS客戶端。

來源

2010-08-25 07:08:52

你可以嘗試隱藏jquery塊頂部的所有內容，然後在完成所有凝結之後再次顯示它嗎？

$(document).ready 
(
    function() 
    { 
     $("#surveyForm").hide(); 
     ... MAGIC CONDENSING 
     $("#surveyForm").show(); 
    } 
);

這可能會降低您看到的「快照」的影響。

來源

2010-08-25 07:12:24 Jason

問題發生是因爲調查在文檔「就緒」觸發前可見。 – Anurag 2010-08-25 07:13:51

是的，但是由於他的劇本正在進行的所有凝結，是「快照」？如果是這樣，首先隱藏整個事物，然後冷凝然後顯示可能會減少或消除「快照」效應。 – Jason 2010-08-25 07:16:19

我認爲這個捕捉是因爲默認的html是用初始尺寸來渲染的，但是在dom準備好應用手風琴之後，內容尺寸的變化導致了捕捉。隱藏它仍然會有這個問題，因爲調查最初是可見的，然後會出現眨眼（隱藏/顯示），調查將在手風琴恢復時調整大小。 – Anurag 2010-08-25 07:21:24

如果你想輕鬆地管理非JavaScript的瀏覽器/用戶無需卡當啓用JS，試試你的頁面的頭節點內的下列片段：

document.documentElement.className = 'has-js' 
// or any other class name, use += and append it if you already have a class on your *html* tag

在你的CSS編寫首先設置非js場景，然後將其設置爲none，或者通過將您的與js相關的css選擇器加上.has-js作爲前綴，以任何其他方式將其隱藏起來。

我可能會得到downvoted爲把JavaScript中的頭但請記住，從性能的角度（雅虎等）只有JavaScript 文件（外部）需要被儘可能晚地加載。

JavaScript標記本身不會讓你的頁面加載更長的時間，除非它在分析和執行時會阻止渲染，但在這種情況下，我們希望這樣做，因爲在渲染開始之前需要.has-js類避免閃爍。

來源

2010-08-25 07:29:05

方式，我能想到的解決這個問題是：

使用JavaScript加載CSS文件，做初步的藏身。
將CSS置於noscript塊中，將可見性設置爲true後，將其設置爲任何地方爲false。

兩者都應該工作我認爲雖然我沒有機會正確測試它們。

來源

2010-08-25 09:52:45 Chris

您可以放置內聯Javascript語句，該語句會在呈現後立即隱藏該元素。

基本上...

的<head>部分內部腳本加載
HTML呈現
$(document).ready()火災

因此，要解決這個問題，你可以簡單地做到這一點

<head> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#survey").accordion(); 
    } 
</head> 
<body> 
    <div id="survey">....</div> 
    <script type="text/javascript"> 
     $("#survey").hide(); 
    </script> 
</body>

來源

2010-08-25 10:04:53 Marko

在jQuery的$（document）.ready（）之前隱藏元素的可訪問方法？

回答

相關問題