4

私はAJAXベースのWebサイトを構築しており、すべてのWebサイトコンテンツがAJAXを介してロードされています。

一部のページには、コンテンツとともに読み込まれるCSSがあります（コードは次のとおりです）。HTMLとCSSが読み込まれたら、いくつかのスクリプトを実行して、画像の位置を変更したり、幅を変更したりします。

問題は、CSSルールが適用される前にJavaScriptが実行されることがあるということです。例：cssに従ってdiv幅を200pxにする必要がある場合、javascriptが1000pxと読み取ることがあるため、計算が間違ってしまいます。

私の調査では、読み込まれた画像だけでなく、読み込まれたCSSやその他すべてを検出するクロスブラウザソリューションは得られていません。

jQueryのAJAX関数を使用して目的のHTMLを取得します（この部分は正常に機能しています）。HTMLを取得したら、 jQueryのhtml関数を使用して適用します。

それが完了したら、このコードを使用して必要なcssをロードします。

css         = document.createElement('link');
css.rel     = 'stylesheet';
css.type    = 'text/css';
css.media   = "all";
css.href    = url;
document.getElementsByTagName("head")[0].appendChild(css);

タイムアウト関数を使用することもできますが、それは単なる推測ではなく、スクリプトを実行する必要があるときにスクリプトが実行されることを確認したいと思います。何か提案はありますか？

編集私は説明をより明確にするためにこの画像を含めました

ここに画像の説明を入力してください

4

3 に答える 3

2

これまで試したことはありませんが、スタイルシートのロードイベントはどうですか？IEがonloadイベントを発生させず、サポートする必要がある場合は、onreadystatechange機能するはずです。

于 2013-02-04T02:06:37.907 に答える
0

あなたは問題を複雑にしすぎていると思います。すべてのCSSを特定の親クラスにのみ反応するように設定した場合（たとえば、aboutページを動的にロードする場合）、すべてのCSSはのようになります.about .example {} .about h2 {} etc。連絡先ページも同様です.contact img {}

これで、CSSファイルが絶対に大量でない限り、上部に1つのファイルを含めると、CSSが適用されることをほぼ保証できます。

于 2013-02-03T22:02:40.547 に答える
0

この問題を抱えているのは私だけではないことを嬉しく思います。CSSスタイルがDOMに適用された後に実行する必要のあるJavaScriptがいくつかあります。

ZER0が提案したものは良い解決策だと思いますが、ドキュメントの最後に単一の連結/縮小されたJSファイルをロードし、連結/縮小されたCSSが上部にあるためOnLoad、CSSタグでイベントを使用できませんでした。資料。<link>

私の解決策： JavaScriptが依存する基本的なCSSスタイルを<style>タグを使用してDOMに直接依存させます。

このように、スタイルはDOMがロードされるとすぐに適用されます。JSが実行されるまでに、DOMには基本的なスタイルが適用されます。

于 2014-02-05T13:27:28.953 に答える