ページが完全にレンダリングされた後にjavascriptを実行する

Question

シンタックスハイライトスクリプトを作成しようとしています。私は1万行のコードでスクリプトを使用しようとしましたが、ロード中に空白のページが表示されます。スクリプトが完了したら、すべてが表示されます。ところで、私はjQueryの準備関数の中でスクリプトを呼び出しました。

$(myFunction); 

ページが完全にレンダリングされた後、スクリプトを実行する必要があり、ユーザーは実際にスクリプトが終了していない場合でも、ページをナビゲートすることができます。 javascriptは、ページの反応を妨げずに、コードを1つずつ強調表示するので、バックグラウンドで実行されます。前もって感謝します。

EDIT：

これをより明確にするために、私はすべてが「ロードされない」「レンダリング」された後にコードを実行したいと思います。すべてが画面に既に表示されているはずであり、ユーザーは実際にコードが強調表示されているのを見ることができます。ありがとう。

Answer 1

すべての画像を読み込んだ後で、

私はwindow.onloadはあなたがクリスさんのコメントパー

window.onload = function() { 
    //dom not only ready, but everything is loaded 
}; 

EDIT

探しているものを、ここではjQueryの方法だと思う。

$(window).load(function() { 
    //dom not only ready, but everything is loaded 
}); 

Answer 2

わからない正確にどのくらいのデータあなたがjquery ajax呼び出しを実行し、完了したメソッドを使ってあなたのhigを実行する準備ができている場合はどうなりますか？機能は？多くのデータがある場合は、ページの読み込みが遅くなります。

はとにかく完全な方法は、AJAXリクエストが完了したときに実行する関数を指定します。この

$.ajax({ 
      type: "POST", 
      url: "Where data is actually stored", 
      data: { ChannelTypeID: ChannelTypeID }, 
      datatype: "html", 
      beforeSend: function() { 

      }, 
      success: function (myHTML) { 
       $('body').html(myHTML); 
      }, 
      error: function() { 
       alert("Ajax request was unsuccessful"); 
      }, 
      complete: function() { 
       highlighterFunction(); 
      } 
     }); 

に類似したいと思います。うまくいけば、成功はデータをプッシュし、ハイライトが正常に動作するのに十分早く発射します。

Answer 3

これを行う簡単な方法は遅延を導入することです。これを実現するには、setTimeout（）を使用します。 たとえば、次のようになります。setTimeout（func、1000）;

上記の行は、1000ミリ秒待ってから関数funcを実行します。 コンテンツの読み込みにかかる時間に応じて、setTimeoutにtimefield（パラメータ）を設定します。

使用例：

$(document).ready(function(){ 

function func() 
{ 
    alert("hi"); 
} 
setTimeout(func, 1000); 
}); 

この情報がお役に立てば幸い！

Answer 4

window.onload通報あなたが$(window).loadアプローチを使用する場合でも、すべての上に、非同期のコールバック関数の多くが存在する可能性があるため、ご使用の蛍光ペンのものが、完了$(document).readyから前に何かを実行します可能性があり

に近づきます場所。

私のアプローチ

私はdocument.readyState == 'completeとsetTimeoutを待っているの組み合わせを使用します。考えられるのは、ページが完全にレンダリングされるまで（したがって'complete'）待ってから、さらに$(document).ready JQueryラッパーのコンテンツが完成したことを確認することです（したがって、setTimeout）。

$(document).ready(function(){ /*...*/ });内のすべてが完了するまでに200ミリ秒かかると仮定して、問題を解決する方法は次のとおりです。

function highlighterAction() { 
    // actually do the highlighting stuff here 
} 

function highlighter() { 
    /* 
     The short pause allows any required callback functions 
     to execute before actually highlighting, and allows 
     the JQuery $(document).ready wrapper to finish. 
    */ 
    setTimeout(function() { 
     highlighterAction(); 
    }, 200); 
} 

/* 
    Only trigger the highlighter after document fully loaded. This is 
    necessary for cases where page load takes a significant length 
    of time to fully load. 
*/ 
if (document.readyState == 'complete') { 
    highlighter(); 
} else { 
    document.onreadystatechange = function() { 
     if (document.readyState === "complete") { 
      highlighter(); 
     } 
    } 
}