元のHTMLを読み込み中に変更する方法

Question

いくつかのHTML要素のCSSプロパティとしてJSで計算されたデータ（例：ウィンドウサイズ）を使用する必要があります。レイアウトが変更されたためにウィンドウがちらつくのを避けるため、document.onreadyを使用する余裕はありません。 DOM要素がDOMツリーに追加された時点で実際にJS関数をトリガする必要があります。

私はDOMNodeInsertedイベントで試したことがありますが、JavaScriptを使用してHTMLコードのロード後に追加された要素に対してのみトリガーされたようです。

私が必要とするのは、ページの元のHTMLソースに表示されているタグを変更することです。だから、私は変更する必要があるタグのHTMLコードの直後にJavaScriptをインライン化するだけですが、このようなタグのたびにJSをインライン展開せずにこれを行う方法があります。 DOMNodeInsertedのようなものですが、元のHTMLがレンダリングされている間にトリガされます。または、これを他の方法で行うことができます.JS依存のレイアウトをロードした後（ユーザーに表示する前に適切に生成されている）、HTMLコードがページに残っている（JavaScriptからページを完全に生成しないなど） ？

更新 ここに画像のサイズを変更するためのjavascriptがあります。それは幅と高さの両方を尊重し、ウィンドウ幅/高さが画像自体より小さくなければwidht：100％またはheight：100％が機能します。

function resizeImg() { 
    var imgwidth = bgImg.width(); 
    var imgheight = bgImg.height(); 

    var winwidth = $(window).width(); 
    var winheight = $(window).height(); 

    var imgratio = imgwidth/imgheight; 

    imgwidth = winwidth; 
    imgheight = winwidth/imgratio; 


    if (imgheight < winheight) { 
     imgheight = winheight; 
     imgwidth = imgheight * imgratio; 
    } 

    $('.cover-image').css({ 
     width: winwidth+'px', 
     height: winheight+'px' 
    }); 
} 

Answer 1

スクリプトを使用して、スタイルシートを作成し、ボディのレンダリング前に新しいスタイル要素に追加することができます。

または、スタイルシートでメディアクエリを使用して、さまざまなウィンドウまたはデバイスのサイズに適したスタイルを適用できます。