在css加載完畢后自動判斷頁面是否加入css或js文件
更新時間：2014年09月10日 17:17:55 投稿：whsnow
使用jquery ui中的dialog()來顯示消息框，為了使方法方便調(diào)用，便加入了自動判斷頁面是否加入了ui.js和ui.css，具體實(shí)現(xiàn)代碼如下
最近在寫項(xiàng)目的framework，寫個JQueryMessageBox的類，以使用jquery ui中的dialog()來顯示消息框，為了使方法方便調(diào)用，便加入了自動判斷頁面是否加入了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下可以，因?yàn)樵贗E9下CSS即使后下載下來，也會重新繪制頁面元素，而IE8則不會）.解決此問題的方法，可以使用ajax，當(dāng)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;
}
相關(guān)文章
jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過時出現(xiàn)隱藏層文字鏈接的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過時出現(xiàn)隱藏層文字鏈接的方法,涉及jQuery鼠標(biāo)hover事件的響應(yīng)及頁面元素的動態(tài)處理技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
這篇文章主要為大家詳細(xì)介紹了jquery插件說下無縫輪播，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
找了個時間看了下EasyUI插件，對它的插件感覺是很舒服，特地把Easy UI的大部分功能屬性做了一下匯總。使用easyUI的朋友可以收藏下。2011-01-01
這篇文章主要介紹了jQuery實(shí)現(xiàn)切換字體大小的方法,實(shí)例分析了jQuery操作字體css樣式的技巧,需要的朋友可以參考下2015-03-03
CheckBoxList多選樣式j(luò)query、C#獲取選擇項(xiàng)
使用jquery、C#獲取CheckBoxList選擇項(xiàng)，實(shí)現(xiàn)如下，感興趣的朋友可以參考下2013-09-09
jQuery實(shí)現(xiàn)左右切換焦點(diǎn)圖
這篇文章主要介紹了jQuery實(shí)現(xiàn)左右切換焦點(diǎn)圖的核心代碼，有需要的小伙伴可以參考下2015-04-04
用戶可以通過鼠標(biāo)拖拽柱狀圖從而改變每根柱子的高度，最終達(dá)到通過鼠標(biāo)拖拽圖形界面來修改服務(wù)器數(shù)據(jù)的目的。2010-11-11
jquery創(chuàng)建一個ajax關(guān)鍵詞數(shù)據(jù)搜索實(shí)現(xiàn)思路
我們經(jīng)常需要在前臺頁面輸入關(guān)鍵詞進(jìn)行數(shù)據(jù)的搜索這已經(jīng)成為了一種習(xí)慣今天給大家分享一下如何使用 jQuery，MySQL和Ajax創(chuàng)建簡單和有吸引力的Ajax搜索,感興趣的你可不要錯過了哈2013-02-02
jQuery獲取復(fù)選框選中的當(dāng)前行的某個字段的值
這篇文章主要介紹了jQuery獲取復(fù)選框選中的當(dāng)前行的某個字段的值,需要的朋友可以參考下2017-09-09
本文主要對平時常用的jquery小技巧進(jìn)行匯總，具有很好的參考價值，有需要的朋友可以看下2016-12-12