4

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

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

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

0

3 件の回答 3

7

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

12
  • Hiroshi Yamamoto 様 ご返答ありがとうございます。 ■ ... それを、 <div> 内の <img> が読み込みを終了した時とするなら、 <div> 内の全ての <img> 要素に onload を定義しておき、全ての画像リソースの読み込み完了を待ってから、処理が始まるようにコードを書くことになります。 << とございますが、div要素の中にimg要素が入っていなければこの処理は成し得ないということでございますか? Commented 2015年2月7日 8:07
  • 2
    結局、<div> の中に非同期読み込みをするタグが含まれている場合、その読み込みが終了したことを取るためには、コードを書く人がそれらをいちいち指定してあげる必要がある、ということです。div に非同期読み込みをする要素が何もなければ一番目の方法でよいでしょう。 /// <body onload=""> の動作と同じになる方法が一番目のコードになりますが、<img> タグがあった場合はタグ自体の読み込み完了は取れているけれど、当然ながら、その定義から読み込まれる画像リソースの完了は待たないことを注意してください。画像リソースの完了については、 <img> タグに聞かなければなりません。 /// でもああ結局コードが欲しいと思うので、なんか書いてみます。 Commented 2015年2月7日 9:00
  • サンプルまでご提供いただきありがとうございます。 上記コードを試してみましたが、動作してくれませんでした。 <div class='onload-on-img-onload' onload="window.alert('all resources loaded')"> これは先に読み込ませたい要素に書き込めばよろしかったですか? Commented 2015年2月9日 9:13
  • JavaScript のコードでは、 読み込まれた HTML から対象の <div> を探すので、 JavaScript 部分が後ろで実行されるようにしてください。ファイル最後の </body> の前か、もしくは、 Javascript 部分のコードを body.onload 系のコールバック中に入れるかになると思います。<div> 自体の位置は、それより前であれば、どこでもかまいません。 Commented 2015年2月9日 9:25
  • Hiroshi Yamamoto 様 ご返答ありがとうございます。そうでございましたか、<head></head>内に入れ込んでいました。 そうなりますと、jQueryの呼び出しも上記コードの記載のように<div class='onload-on-img-onload' onload="window.alert('all resources loaded')">の直前に書き込む形になりますか? Commented 2015年2月9日 9:40
2

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

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

13
  • 動かないです・・・良い回答だと思いますのでぜひとも動く形でコードを共有してください。
    – kotatsu
    Commented 2015年2月9日 0:40
  • ご回答ありがとうございます。 kotatsu 様 私もこれから上記コードを試させていただこうと思っています。 主に何が原因で動かないなど、参考にお聞かせいただけませんか? Commented 2015年2月9日 9:15
  • 1
    同じコードですがjsfiddleに動くものを書きました。jsfiddle.net/7cgjo9gk
    – harry0000
    Commented 2015年2月9日 10:40
  • harry0000 様 ご返答ありがとうございます。 質問がございます。 class="images"の中のimgが実行対象ですか? $.fn.all_loaded = function () {のコードは</body>直前に書くのが正しいですか?私が解析するればいいことを質問して申し訳ございません。 Commented 2015年2月9日 10:47
  • 1
    @harry0000 Deffered~resolve~when を使った方が jQuery らしいですね。 実装の仕方参考になります。興味本位ですが少し書き換えてみました。 jsfiddle.net/higon/7cgjo9gk/1 失敗ケースを含めるて考えるとイメージ読込終了を取るのは難しいことですね... Commented 2015年2月9日 13:14
1

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

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。