7

dom と css の準備ができたときに JavaScript を実行したいのですが、画像は気にしません (画像を遅延ロードする傾向があります)。

dom の準備完了ステータスを検出する方法は知っていますが、css の準備ができていることを検出する方法はありますか?

4

7 に答える 7

1

document.readyイベントを使用する必要があります。window.onLoadすべての画像とその他が完全に読み込まれたときに発生します。

ソース: window.onload と $(document).ready()

于 2012-12-28T03:26:25.867 に答える
0

これは、JSオンロードを使用することと、すべてのCSSを最初にロードすることの組み合わせになります。スクリプトをロードする前にすべてのCSSをロードすると、すべてのCSSがロードされることが保証されます。ロード時にJSと組み合わせると、探しているものが得られます。

于 2013-01-07T22:00:07.897 に答える
0

すべての CSS をページのヘッダーで JavaScript の前にアップロードします。

また、すべての要素が最初に完全にロードされるように、タグの直前に JavaScript をページの下部に配置することもベスト プラクティスです。

$(document).ready(function(){
    // now do your actions
});
于 2013-01-15T09:23:15.150 に答える
0

$(document).ready手法を使用できない場合は、body タグを閉じる直前にスクリプト コードを配置できます。

<body>
html code....
....
<script>
var executeAfterDOMReady;
....
</script>
</body>

CSS に関しては、jQuery 経由で CSS ファイルを呼び出すことができます。

$("<link/>", { rel: "stylesheet", type: "text/css", href: "your.css"}).appendTo("head");

または、Ajax 呼び出しを行うこともできます。

$.ajax({
    url:"your.css",
    dataType:"script",
    success:function(data){
        $("head").append("<style>" + data + "</style>");
        }
    });
于 2013-02-10T23:09:52.443 に答える
0

JavaScript を使用して css ファイルを明示的にロードしない限り、javascript が .css ファイルがロードされているかどうかを判断する方法はありません。後者を行う方法は次のとおりです。

function dynamicallyLoadCss(fileName,callBackFunc){
    var fileRef=document.createElement("link");
    fileRef.setAttribute("rel", "stylesheet");
    fileRef.setAttribute("type", "text/css");
    fileRef.setAttribute("href", filename);

    if(callBackFunc) {
        callBackFunc();
    }
}
//Call the function like so...
dynamicallyLoadCss("mystyles.css", function() {
    console.log("Our hamsters have finished loading your mystyles.css file.");
});
于 2012-12-28T03:30:32.907 に答える
0

以下のようなものが必要です。この関数は、ページ全体ではなく、DOM が読み込まれるとすぐに実行されます。ページの読み込みと DOM の読み込みには大きな違いがあります。

$(document).ready(
                 function(){
                            alert('DOM is now loaded and can be manipulated .');
                           }
                 );
于 2013-01-06T17:01:31.400 に答える
0

ここの人々は、 jQuery の DOM 対応機能を使用する多くの例を投稿していますが、それを使用するには jQuery を含める必要があることを言及または実証していません。

やりたいことを達成するためにそのまま JavaScript を使用することはできますが、その手法はブラウザーによって異なります。jQuery は、これらの違いを全面的に正規化するために常に優れた仕事をしてくれます。個人的には、私は jQuery マニアです。おそらく常にそうです:)

HTML ドキュメントの最後に<head>、jQuery ライブラリを含め、次にコードを含めます :)

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    $(function(){
        console.log("DOM is Ready! Images haven't finished loading yet!");
    });
</script>

jQuery の.ready()機能の使用には、いくつかの形式があります。個人的には上記の方法が好きです。以下の 2 つは、最も公式に容認されているようです。

$(document).ready(function(){  console.log("DOM Ready!");  });

$(function(){  console.log("DOM Ready!");  });

jQuery のドキュメントに.ready()は、次のように書かれています。

JavaScript は、ページのレンダリング時にコードを実行するためのロード イベントを提供しますが、このイベントは、画像などのすべてのアセットが完全に受信されるまでトリガーされません。ほとんどの場合、スクリプトは DOM 階層が完全に構築されるとすぐに実行できます。.ready() に渡されたハンドラーは、DOM の準備が整った後に実行されることが保証されているため、これは通常、他のすべてのイベント ハンドラーをアタッチして他の jQuery コードを実行するのに最適な場所です。CSS スタイル プロパティの値に依存するスクリプトを使用する場合は、スクリプトを参照する前に、外部のスタイルシートを参照するか、スタイル要素を埋め込むことが重要です。

CSS を最初にロードする必要があると述べたので、ドキュメントからの引用を強調しました。<link rel="stylesheet" href="style.css" />一見すると、タグがjQueryコードの上<head>のセクションに配置されていることを確認するだけです:)

ハッピーコーディング！//追跡

jQuery.com

于 2013-02-04T19:43:40.770 に答える