CSS가 로드된 후 후속 코드를 실행할지 여부를 결정합니다.Example_javascript 기술.

현재 프로젝트 프레임워크를 작성 중이며 JQuery UI에서 대화 상자()를 사용하여 메시지 상자를 표시하는 JQueryMessageBox 클래스를 작성 중입니다. 메서드를 쉽게 호출할 수 있도록 페이지 추가 여부 자동 판단을 추가했습니다. 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 코드는 즉시 로드되지 않으므로 대화 상자가 표시될 때 스타일이 없습니다(IE9에서는 괜찮습니다. IE9에서는 나중에 CSS를 다운로드하더라도 페이지 요소가 다시 그려지기 때문입니다. IE8은 그렇지 않음) 이 문제를 해결하려면 CSS가 로드된 후 대화 상자가 표시되므로 코드는 다음과 같습니다.

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; 
}