

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内はかなりフェイクいれています)色々なサンプルを混ぜ合わして作っている為、私自身理解しきれていません。  
ですので、まったく手法が変わっても構いませんので、どうぞよろしくお願いいたします。


CC BY-SA 3.0
2015-02-09T11:26:43.647
6190
2015-03-05T00:37:39.977
2015-02-10T03:58:55.130
7214
7887
question
javascript html jquery css html5
img要素の読み込み完了後に非表示要素を表示したい


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

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


CC BY-SA 3.0
2015-02-10T00:14:05.330
6200
2015-02-10T00:14:05.330
531
6190
answer


以下の様な感じでいいかと思います。

[code]

    <script>
    function main_on(el){
        //クラスを付け替える
        $(el).removeClass("main_off").addClass("main_on");
    }
    </script>
    <div class='onload-on-img-onload main_off'>
      <img src="http://i.imgur.com/PWSOy.jpg" />
    </div>
    
    <div class='onload-on-img-onload main_off'>
      <img src="http://i.imgur.com/PWSOy.jpg" />
    </div>
    <script>
    function handler(event){
        //渡された親要素の配下のimgが全てcomplete属性が真ならば切り替え処理を呼ぶ
        if($(event.data).hasClass("main_off") && //二重に呼ばれるのを防止する
           $(event.data).find("img").filter(function(index, element) {
             return !element.complete;
           }).length == 0){
               main_on(event.data);
        }
    }
    //onload-on-img-onload クラスのdiv 配下のimgのonloadイベントにhandlerを割り付ける
    $("div.onload-on-img-onload").each(function (idx, div) {
      $(div).find("img").one("load", div, handler);//トップのdivを渡す
    });
    </script>
    
[/code]


CC BY-SA 3.0
2015-02-10T00:23:01.160
6201
2015-02-10T00:52:32.843
2015-02-10T00:52:32.843
5044
5044
6190
answer


これでどうですか？  
[Nick Craver](https://stackoverflow.com/questions/3877027/jquery-callback-on-
image-load-even-when-the-image-is-cached)さんの回答を参考にしています。  
`each`部分はキャッシュの読み込みに対応している部分で、`load`イベントを発火しています。  
※BLUEPIXYさんの指摘を受け、画像読み込み完了待ちするように修正しました。

[code]

      $(document).ready(function() {
    
        var loadWaitCount = $("img.loadWait").length;
    
        $("img.loadWait").one("load", function() {
            loadWaitCount--;
            if (loadWaitCount == 0) {
                $("#main").removeClass("main_off").addClass("main_on");
            }
        }).each(function() {
            if (this.complete) $(this).load();
        });
    
    });
[/code]

[code]

    #main {
      width: 160px;
      height: 80px;
      background-color: #aaddcc;
    }
    
    .main_off {
      display: none;
    }
    
    .main_on {
      display: block;
    }
    
    img {
      width: 100px;
    }
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <div id="contents">
      <img class="loadWait" src="http://i.imgur.com/PWSOy.jpg" />
      <img class="loadWait" src="http://i.imgur.com/PWSOy.jpg" />
    </div>
    <div id="main" class="main_off">main contents!</div>
[/code]

余談ですが、質問に書かれているコードが`jQuery`化できていないです。

[code]

    document.getElementsByTagName('div').className = "main_on";
    
[/code]

は`jQuery`では

[code]

    $('div').addClass('main_on');
    
[/code]

で良いです。


CC BY-SA 3.0
2015-02-10T00:34:40.920
6202
2015-03-05T00:37:39.977
2017-05-23T12:38:55.307
-1
7214
6190
answer


子孫セレクタを利用すると、シンプルになります。

[code]

    <html>
      <head>
        <style>
          .hoge {
            display: none;
          }
          
          .loaded .hoge {
            display: block;
          }
        </style>
      </head>
      <body onload="document.body.classList.add('loaded');">
        <div class="hoge"> Loaded!! </div>
      </body>
    </html>
[/code]


CC BY-SA 3.0
2015-02-10T02:46:15.000
6211
2015-02-10T02:46:15.000
4809
6190
answer