2

HTMLのレンダリングと同時にjavascriptファイルをレンダリングするテクニックはありますか？

私の最初のアイデアは、<script>タグで頭にロードすることでしたが、これはロードの順序に影響しないことがわかりますか、それとも間違っていますか？

問題は、ページの読み込み時にjavascriptを使用して要素の幅を設定する必要がある場合があることです。これは、要素がHTMLでレンダリングされた後に要素の幅を設定するjavascriptコードが原因で、少し振動するのが本当に面倒です。

4

4 に答える 4

4

要素を HTML で非表示としてレンダリングし、Javascript で幅を設定してから表示します。

于 2011-03-21T12:34:59.343 に答える
2

(一部のブラウザーでは) async フラグを設定しない限り、JS ファイルはコンテンツの読み込みをブロックします。そのため、ロードした瞬間から JS スクリプトを実行できます。

ただし、CSS ソリューションを見た方が良いかもしれません。

非同期タグのサポート: <script async="async" /> をサポートするブラウザーは?

于 2011-03-21T12:33:09.893 に答える
1

はい、JcorsLoader のような小さなローダー javascript を使用できます (Gzip では 647B のみ)。

JcorsLoader.load(
                "http://xxxx/jquery.min.js",
                function() {
                    $("#demo").html("jQuery Loaded");
                },
                "http://xxxx/jquery.cookie.js",
                function() {  
                    $.cookie('not_existing'); 
                }
            );

複数の js を並行してロードし、DOMReady または onload をブロックすることなく順番に実行します。

https://github.com/pablomoretti/jcors-loader

于 2012-10-11T00:44:34.180 に答える
0

インライン スクリプト ブロックで を使用document.writeして、 inline を含む要素の HTML を出力できますstyle。しかし、それは醜いでしょう。あなたはすべてを避けることができないと確信していますか？

編集:よりクリーンな方法はdocument.write、要素の HTML の前に id セレクターを使用して要素の幅を設定するインライン スタイル ブロックです。これにより劣化が改善されますが、準備が整う前に DOM にアクセスするという潜在的な問題を回避できます。

<script type="text/javascript">
    var width = ...;
    document.write('<style type="text/css">#myid{width:' + width + 'px;}</style>');
</script>
<div id="myid">...</div>
于 2011-03-21T12:36:25.730 に答える