

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でやりたいと思っておりますが、私の知識では実現できなかったので、皆様のお力をお貸しいただければと思っております。  
ご返答よろしくお願いいたします。


CC BY-SA 3.0
2015-02-07T06:25:51.760
6086
2020-02-25T10:56:54.610
2020-02-25T10:56:54.610
32986
7887
question
javascript html css
DIV要素にonloadの代用になるものはありますか？


`<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]


CC BY-SA 3.0
2015-02-07T07:39:19.740
6090
2015-02-09T10:53:44.333
2015-02-09T10:53:44.333
4978
4978
6086
answer


全部の画像を読み込んだところで何かの処理をやりたい、ということでよろしいでしょうか。  
jQueryを使うことに抵抗がないなら、非同期事象の処理はDeferredを使って片付けるのがいいと個人的にはおもいます。  
こういうの、ちょちょっとプラグイン書いてしまえばすぐできますよ。こんな感じでどうでしょう？  
（投稿システムの使い方にまだ慣れていないのでエラーがあるかもしれません。あったらごめんなさい）

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
      $.fn.all_loaded = function(){
        var all_done = [];
        this.each(function(i, img){
                  var promise = new $.Deferred();
                  all_done.push(promise);
                  img.onload = function(){
                    promise.resolve();
                  }
        });
        return $.when.apply(null, all_done);
      };
    </script>
    
    <div class="images">
      <img src="//dummyimage.com/200x100/" />
      <img src="//dummyimage.com/200x100/" />
      <img src="//dummyimage.com/200x100/" />
    </div>
    <script>
      $('.images img').all_loaded().done(function(){alert('all loaded')});
    </script>
[/code]


CC BY-SA 3.0
2015-02-08T01:44:05.860
6127
2015-02-09T15:27:50.437
2015-02-09T15:27:50.437
3068
8136
6086
answer


intervalを使うのはダメですか？

[code]

    var intv = setInterval(function(){
      if($(".target_div").length > 0){
        clearInterval(intv);
        //ここでやりたいことをやる
      }
    }, 100);
    
[/code]


CC BY-SA 3.0
2016-12-20T02:24:16.553
31251
2016-12-20T02:24:16.553
15048
6086
answer