判斷在css加載完畢后執(zhí)行后續(xù)代碼示例
更新時間：2014年09月03日 11:18:45 投稿：whsnow
這篇文章主要介紹了在css加載完畢后執(zhí)行后續(xù)代碼的方法,需要的朋友可以參考下
最近在寫項目的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) {
//創(chuàng)建一個style元素，并追加到head中
//替換其中images的路徑
$('<style type="text/css">' + data.replace(/url\(images/g, 'url(/css/images') + '</style>').appendTo('head');
//dialog() script;
}
});
}
else {
//dialog() script;
}
相關文章
JavaScript庫之vanilla-tilt使用教程(一個平滑的3D傾斜庫)
vanilla-tilt.js是Javascript中一個平滑的3D傾斜庫,可以讓網頁的一些控件變得動態(tài)起來,下面這篇文章主要給大家介紹了關于JavaScript庫之vanilla-tilt使用的相關資料,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了通過JS深度判斷兩個對象字段相同，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，,需要的朋友可以參考下2019-06-06
Bootstrap 提供了一些輔助類，以便更快地實現(xiàn)對移動設備友好的開發(fā)。這些可以通過媒體查詢結合大型、小型和中型設備，實現(xiàn)內容對設備的顯示和隱藏。下面通過本文給大家分享Bootstrap 響應式實用工具，一起看看吧2017-03-03
這篇文章主要介紹了JavaScript類型判斷的四種方法，幫助大家更好的理解和學習JavaScript，感興趣的朋友可以了解下2020-10-10
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單的倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
Three.js利用性能插件stats實現(xiàn)性能監(jiān)聽的方法
Three.js 是一款運行在瀏覽器中的 3D 引擎,你可以用它創(chuàng)建各種三維場景，而下面這篇文章主要給大家介紹了關于Three.js如何利用性能插件stats實現(xiàn)性能監(jiān)聽的相關資料，需要的朋友可以參考借鑒，下面來一起學習學習吧。2017-09-09
我們給大家分享了關于JavaScript的async/await的相關知識點內容，有需要的朋友們可以學習下。2018-08-08
本文主要分享了js實現(xiàn)消息滾動效果的示例代碼。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
本系列的開篇文章我們一起探討了jQuery如何開發(fā)插件，今天這篇文章，我們來繼續(xù)插件開發(fā)之旅，希望大家能夠喜歡。2015-01-01
jQuery實現(xiàn)動態(tài)添加、刪除按鈕及input輸入框的方法
這篇文章主要介紹了jQuery實現(xiàn)動態(tài)添加、刪除按鈕及input輸入框的方法,涉及jQuery事件響應及頁面元素動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2017-04-04