読者です 読者をやめる 読者になる 読者になる

jQueryUI読み込みのフォールバック処理

前回のjQueryのフォールバックを行ったので、今度はjQuery UIのフォールバックでも

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/smoothness/jquery-ui.css" type="text/css" />
<script type="text/javascript">
$.each(document.styleSheets, function(i,sheet){
 if(sheet.href){
  if(sheet.href.split(':')[1]=='//ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/smoothness/jquery-ui.css') {
   var tID1 = setInterval(function(){
    if(sheet.rules || sheet.cssRules){
     clearInterval(tID1);
     var rules = sheet.rules ? sheet.rules : sheet.cssRules;
     if (rules.length == 0) {
      $('<link type="text/css" rel="stylesheet" href="/css/smoothness/jquery-ui-1.8.21.custom.css" />').appendTo('head');
     }
    }
   },10);
  }
 }
})
</script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/i18n/jquery-ui-i18n.min.js"></script>
<script>window.jQuery.ui || document.write('<script src="/js/jquery-ui-1.8.21.custom.min.js"><\/script>')</script>

jQueryとは違い、CSSの処理が増えているのが難しい所

rulesかcssRulesがセットされるまでsetIntervalでループさせ、セットされたら長さのチェック、長さ0ならローカルのCSSを読み込むと行った流れ。