啓用ondomready JavaScript支持的替代解決方案

有很多JavaScript框架可以讓您在頁面完全加載之前使用DOM。通常你會看到HTML或body標籤被操縱，以確定用戶的代理是否支持JavaScript。啓用ondomready JavaScript支持的替代解決方案

例如，HTML標籤將有一類「非JS」和當TEH DOM是準備好了，類名被更新爲「JS」代替，從而使前端開發者樣式的頁面中有兩種方式 - 一種支持JavaScript，另一種方式可以在JavaScript不支持時正確顯示數據。

這工作正常，但總是有點滯後，當更新的類命名函數運行時（從'no-js'到'js'），您經常會看到屏幕跳轉不同的風格適用於JS支持的網站版本。

這一直讓我惱火，如果頁面上有很多基於JavaScript的交互性，它確實看起來很醜。

長話短說，我的目的是找到一個解決方案，比ondomready事件更快。我想出的解決方案是在打開正文標記後立即運行以下語句：

<script type="text/javascript">//<![CDATA[ 
var elBody = document.getElementsByTagName('body')[0]; 
elBody.className = elBody.className.replace(new RegExp('no-js\\b'), 'js');//]]></script>

這似乎很有用。沒有更多的屏幕跳躍。這是一個好方法嗎？任何我不知道的缺點？

來源

2011-02-10 Mike

我也在開幕<body>標籤後儘快運行腳本 - 它似乎是迄今爲止最好的地方。我只有一個建議。如果您避免使用正則表達式，這個小腳本可能運行得更快。也許簡化爲這樣的事情：

<body> 
<script type="text/javascript">document.getElementsByTagName('body')[0].className='js';</script>

然後你可以風格的頁面在默認情況下非JavaScript的情況下，並使用js類提升。例如：

/* Base styles for signin form, displayed inline on page */ 
#signin-form{ 
background: #fff; 
color: #333; 
/* ...other pretty form styles... */ 
} 

/* JS enhanced floating signin form */ 
.js #signin-form{ 
display: none;/* removes form from DOM and shown by JavaScript */ 
position: absolute; 
top: 0; 
right: 1em; 
}

還有一個CSS渲染的優勢在這裏，由於選擇#signin-form將比.no-js #signin-form運行得更快。

希望這會有所幫助！

來源

2011-03-24 11:43:54 dotjay

啓用ondomready JavaScript支持的替代解決方案

回答

相關問題