DIV要素にonloadの代用になるものはありますか？


div要素にonloadを付けたいのですが、残念ながら現在の時点ではdivにonloadは付けれません。  
ですが、divにonloadなる物を付けたいのですが、何か代用できる方法などはございますでしょうか？  
私がやりたいことは、「onload指定している箇所が読み込まれた後、他の要素を表示する」事です。

[code]

    <style>
    .main_off {
      display: none;
    }
    .main_on {
      display: block;
    }
    </style>
    <script>
    function main_on(){
      document.getElementById('main').className = "main_on"; 
    }
    </script>
    <noscript>
    <style>
      .main_off { display: block; }
    </style>
    </noscript>
    </head>
    <body>
    
    <header>
      <!-- 画像のonloadイベントで本文のcssを変更 -->
      <img src="abcd.jpg" onload="main_on();" />
    </header>
    
    <section id="main" class="main_off" >
      本文
    </section>
    
[/code]

上記のサンプルコードの処理をdivでやりたいと思っておりますが、私の知識では実現できなかったので、皆様のお力をお貸しいただければと思っております。  
ご返答よろしくお願いいたします。




`<div>` からは、 `'load'`
イベントが発生することはありませんので、単純にイベントを取る方法で実現はできません。質問を読む限りでは、もし、仮に「 **`<div>`
のロード完了**」のイベントがあったとしても、その定義は、質問者が実現しようとしていることとは異なる気がします。

「 **`<div>` のロード完了**」の定義があるとすれば...

### ■ ...それを、「`<div>` 要素がブラウザによって読み込まれた時」とするなら、

[code]

    <div>brabrabrabrabra</div>
    <script>doSomething();</script>
    
[/code]

として、`<div>` が読み込まれた直後に、コードが実行されるようにしてください。

### ■ ... それを、「 `<div>` 要素のレンダリングが完了した時」 と定義するなら、

これは、大抵の場合「 `<div>` の見た目に影響する全てのリソースが読み込まれた時」となりますから、 CSS ファイルの読み込み後、及び、
JavaScript UI ライブラリの読み込み後、にコードが実行されなければなりません。まずは、 `</body>`
の前にコードをおいてみることから始めることになると思います。

[code]

      ...
      <script>doSomething();</script>
      </body>
    </html>
    
[/code]

### ■ ... それを、 `<div>` 内の `<img>` が読み込みを終了した時とするなら、

`<div>` 内の全ての `<img>` 要素について `'load'`
イベントを監視し、全画像リソースの読み込み完了を待ってから、処理が始まるようにコードを書くことになります。 jQuery
を使えば、以下のようになります。（ちと汚いですが）

_`<div>` の中の全画像の読込を待ってから `div.onload()` が呼ばれるコード_:

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
    // 要素内の IMG の読み込み後にonload 関数を呼び出させるようにする
    jQuery.fn.extend({
      enable_onload_for_images: function() {
        var div = this[0];
        var imgs = this.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.readyState === 4) $(this).load();
        });
      }
    });
    $(document).ready(function() {
      // ドキュメント中の 全てのdiv[.onload-on-img-onload] をスキャンし、 onload を有効にする
      var divs = $(".onload-on-img-onload");
      divs.each(function () { $(this).enable_onload_for_images(); });
    });
    </script>
    <div class='onload-on-img-onload' onload="window.alert('all resources loaded')">
        <img src="http://i.imgur.com/PWSOy.jpg" />
        <img src="http://i.imgur.com/PWSOy.jpg" />
        <img src="http://en.wahooart.com/Art.nsf/O/8XX79N/$File/James-E.-Buttersworth-Clipper-in-a-Heavy-Sea.JPG" />
        <img src="http://en.wahooart.com/Art.nsf/O/8XX79N/$File/James-E.-Buttersworth-Clipper-in-a-Heavy-Sea.JPG" />
    </div>
[/code]

