カスタムjavascriptイベントの作成

DOMをロードする前に実行するいくつかのコードを書いています。基本的にModernizrを使ってスクリプトを取得しています。私の問題は、DOMが読み込まれ、スクリプトがまだロードされている場合、読み込みアニメーションを表示したいということです。カスタムjavascriptイベントの作成

Modernizrが先頭で実行されます。 document.getElementByIdを頭にも使用するコードを置くと、DOMがロードされていないためにエラーがスローされます。今私はどのようにこれを解決するための考えがありません。ここで

は、私がこれまで持っているコードです：私は <body>タグ以下、このコードを実行するために使用さ

<head> 
<script> 
    var FileManager = { 
     IsLoading = false; 
     LoadRequiredFiles: function (config) { 
      config = config || {}; 
      this.OnLoading = config.onLoadingCallback; 
      this.OnComplete = config.onCompleteCallback; 
      this.IsLoading = true; 
      if (this.OnLoading) { 
       this.OnLoading(); 
      } 

      var self = this; 
      Modernizr.load([{ 
       load: '/jquery.min.js', 
       complete: function() { 
         if (self.OnComplete) { 
          self.OnComplete(); 
         } 
         self.IsLoading = true; 

       } 
      }, 
      ]); 
     } 
    }; 
    var globalLoadingId = 'globalLoader'; 
    FileManager.LoadRequiredFiles({ 
     onLoadingCallback: function() { 
      document.getElementById(globalLoadingId).style.display = 'block'; 
     }, 
     onCompleteCallback: function() { 
      document.getElementById(globalLoadingId).style.display = 'none'; 
     } 
    }); 
</script>

、それが働きました。今私はそれを<head>に移しました。だから私はそれに2コールバックを渡すために使用されます。今私はむしろそれにイベントを添付して体内でそれらを処理する（DOMがロードされているものと仮定して）。

私が何をしたいのですがどのような

：

<head> 
<script> 
    FileManager.LoadRequiredFiles(); 
</script> 
</head> 

<body> 
<script> 

    //Bind the event, not sure if this is even possible in javascript. 
    FileManager.OnCompleted += fileManagerCompleted; 

    fileManagerCompleted() 
    { 
     document.getElementById(globalLoadingId).style.display = 'none'; 
    } 

    if(FileManager.IsLoading) 
    { 
     document.getElementById(globalLoadingId).style.display = 'block'; 
    } 
</script> 
</body>

出典

2011-07-25 Shawn Mclean

ページが表示のためにあなたのキャンバスです。ロードする前に何も表示することはできません。あなたの進捗状況を表示できる場所に（非常に小さな）ページをロードしたいと思うように聞こえるようになり、コードはajax呼び出しと進行状況を示すjavascriptでページの残りの部分を動的にロード/表示できます。それは私が知っている残りのページロードの前に出る唯一の方法です。

出典

2011-07-25 02:35:56 jfriend00

頭の下のすべてをロードするだけですか？どのように前にそれを持っていた。 –

私はあなたの質問を理解できませんでした。ページがロードされるまで何も表示することはできません。 '

DOMを操作するスクリプトを実行するための信頼できる唯一の方法は、body onloadイベントを使用することです。（window.onloadは普及していますが、信頼性は100％ではありません）

onDocumentReadyイベントを実装しているブラウザがいくつかあります。これはIEで偽装できますが、その使用はお勧めしません。

出典

2011-07-25 03:25:35

使用方法getElementByIdは、それだけでは頭部で使用されるとエラーをスローしません。は、指定されたIDを持つ要素が見つからない場合、nullになる戻り値をチェックしていないため、エラーが発生している可能性があります。

var el = document.getElementById('foo'); 

if (el) { 
    // do somethig with el 
} else { 
    // el wasn't found 
}

問題は、スクリプトがまだ読み込まれており、ページが表示されている場合にのみ、イメージを表示する方法です。単純な答えは、クライアント側のスクリプトの読み込みを使用しないで、サーバーでそれを行います。 :-)

スクリプトの読み込みを維持したい場合は、読み込み中の画像に「hideOnLoad」などのクラスを追加します。ルールを "display：none"に設定した最後のスクリプトの読み込みからコールバックしてください（スクリプトを使用してそのルールでスタイルシートを作成して追加するだけです）。

これで、読み込み中の画像が最初の要素として「hideOnLoad」のクラスの本体に含まれています。スクリプトの読み込みが終了したときに、画像が同じかどうかにかかわらず画像が非表示になりますクラス）が存在したかどうかを判断する。

出典

2011-07-25 04:01:04 RobG

カスタムjavascriptイベントの作成

答えて

関連する問題