img要素の読み込み完了後に非表示要素を表示したい


img要素の読み込み完了を検知し、非表示要素を表示するため、onload=""を使用してCSSの生成を行いたいのですが、いまいち方法が理解できておりません。

[code]

    <style>
      セレクタ {display: none;}
    </style>
    
[/code]

上記のCSSを、onloadを使用して

[code]

    <style>
      セレクタ {display: block;}
    </style>
    
[/code]

に上書きしたいと思っています。

onloadの処理でdisplay:blockを生成する事は可能でしょうか？  
知識のある方お手数をお掛けいたしますが、ご教授いただける幸いでございます。

以下は現在のコードでございます。

[code]

    .main_off {
      display: none;
    }
    .main_on {
      display: block;
    }
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <script>
      function main_on(){
        // イメージが読み込まれた！
        document.getElementsByTagName('div').className = "main_on";
      }
    </script>
    
    <div class='onload-on-img-onload main_off' onload="main_on();">
      <img src="http://i.imgur.com/PWSOy.jpg" />
    </div>
    
    <div class='onload-on-img-onload main_off' onload="main_on();">
      <img src="http://i.imgur.com/PWSOy.jpg" />
    </div>
    
    <script>
      // ## ユーティリティ ##
      // div をスキャンして画像読み込み後に onload を呼び出すコード
      var divs = $(".onload-on-img-onload");
      divs.each(function (idx, div) {
        var imgs = $(div).find("img");
        var count = imgs.length;
      if (count==0 && div.onload)
        div.onload.call(div, count);
      var loaded = 0;
      imgs.one("load", function (e) {
        loaded++;
        if (loaded === count && div.onload)
            div.onload.call(div, count);
        }).each(function () {
          if (this.complete) $(this).load();
        });
      });
    </script>
    
    <body>
[/code]

上記コードは(div内はかなりフェイクいれています)色々なサンプルを混ぜ合わして作っている為、私自身理解しきれていません。  
ですので、まったく手法が変わっても構いませんので、どうぞよろしくお願いいたします。




CSSの評価順を逆手に取って、優先順位の高い位置で、上書きしたいスタイル定義を「再定義」してあげれば良さそうです。

特にbodyタグ内での定義が優先順位として高いので、onloadイベント発火後に、JavaScriptでbodyタグ内にcreateElement("style")してあげて、それに対して上書きしたセレクタに対する新しい定義をinsertRule()で追加してあげれば、おそらくやりたいことは実現できると思います。

