判斷在css載入完畢後執行後續程式碼範例，css樣本

判斷在css載入完畢後執行後續程式碼範例，css樣本

最近在寫項目的framework，寫個JQueryMessageBox的類，以使用jquery ui中的dialog()來顯示訊息框，為了使方法方便調用，便加入了自動判斷頁面是否加入了ui.js和ui.css,代碼如下：

//如果沒有包含ui.js,則引用 if ($('script[src$=""jquery-ui-1.8.11.custom.min.js""]').length == 0) {{ $(""<script src='/js/jquery-ui-1.8.11.custom.min.js' type='text/javascript' />"").appendTo('head'); }} //如果沒有載入css,則載入 if ($('link[ref$=""jquery-ui-1.8.14.custom.css""]').length == 0) {{ $('<link href=""/css/jquery-ui-1.8.14.custom.css"" rel=""stylesheet"" type=""text/css"" />').appendTo('head'); //dialog() script }}

但CSS代碼不會立即載入下來，於是在顯示dialog的時候則不會有樣式（在IE9下可以，因為在IE9下CSS即使後下載下來，也會重新繪製頁面元素，而IE8則不會）.解決此問題的方法，可以使用ajax，當css載入完畢後，再顯示dialog，這樣就可以帶著樣式顯示出來了，代碼如下：

if ($('link[ref$=""jquery-ui-1.8.14.custom.css""]').length == 0) { $.ajax({ url: '/css/jquery-ui-1.8.14.custom.css', success: function(data) { //建立一個style元素，並追加到head中 //替換其中images的路徑 $('<style type="text/css">' + data.replace(/url\(images/g, 'url(/css/images') + '</style>').appendTo('head'); //dialog() script; } }); } else { //dialog() script; }

html代碼是先載入完畢再執行 還是邊載入邊執行

其實瀏覽器載入顯示html的順序是按下面的順序進行的：
1、IE下載的順序是從上到下，渲染的順序也是從上到下，下載和渲染是同時進行的。
2、在渲染到頁面的某一部分時，其上面的所有部分都已經下載完成（並不是說所有相關聯的元素都已經下載完）。
3、如果遇到語義解釋性的標籤嵌入檔案（JS指令碼，CSS樣式），那麼此時IE的下載過程會啟用單獨串連進行下載。
4、並且在下載後進行解析，解析過程中，停止頁面所有往下元素的下載。
5、樣式表在下載完成後，將和以前下載的所有樣式表一起進行解析，解析完成後，將對此前所有元素（含以前已經渲染的）重新進行渲染。
6、JS、CSS中如有重定義，後定義函數將覆蓋前定義函數。

如果你的網頁比較大，希望部分內容先顯示出來，粘住瀏覽者，那麼你可以按照上面的規則合理的布局你的網頁，達到預期的目的。
 
html代碼是先載入完畢再執行 還是邊載入邊執行

我是做開發的，前台也接觸的比較多，我可以明確的說：html代碼是載入完畢以後在執行的，正如上邊那位朋友所說的：“html是載入完畢再執行的但是由於CSS、JS等檔案是在HTML裡外聯的，html載入完了HTML而CSS、JS等沒有載入完或這正在挨個兒載入而已”javascript和CSS等混合在html代碼中，html的載入數度要比javaScript和CSS要快，所以上面朋友說我們有時候看見的網頁是一塊一塊的顯示出來的，因為在顯示的過程中，javaScript和CSS正在載入。