<div>
からは、 'load'
イベントが発生することはありませんので、単純にイベントを取る方法で実現はできません。質問を読む限りでは、もし、仮に「<div>
のロード完了」のイベントがあったとしても、その定義は、質問者が実現しようとしていることとは異なる気がします。
「<div>
のロード完了」の定義があるとすれば...
■ ...それを、「<div>
要素がブラウザによって読み込まれた時」とするなら、
<div>brabrabrabrabra</div>
<script>doSomething();</script>
として、<div>
が読み込まれた直後に、コードが実行されるようにしてください。
■ ... それを、「 <div>
要素のレンダリングが完了した時」 と定義するなら、
これは、大抵の場合「 <div>
の見た目に影響する全てのリソースが読み込まれた時」となりますから、 CSS ファイルの読み込み後、及び、 JavaScript UI ライブラリの読み込み後、にコードが実行されなければなりません。まずは、 </body>
の前にコードをおいてみることから始めることになると思います。
...
<script>doSomething();</script>
</body>
</html>
■ ... それを、 <div>
内の <img>
が読み込みを終了した時とするなら、
<div>
内の全ての <img>
要素について 'load'
イベントを監視し、全画像リソースの読み込み完了を待ってから、処理が始まるようにコードを書くことになります。 jQuery を使えば、以下のようになります。(ちと汚いですが)
<div>
の中の全画像の読込を待ってから div.onload()
が呼ばれるコード:
<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>