I want to display hidden elements after loading img elements.

In order to detect the completion of loading of img elements and display hidden elements, I would like to generate CSS using onload="", but I don't understand how to do it.

<style>
  Selector {display:none;}
</style>

Use the above CSS onload to

<style>
  Selector {display:block;}
</style>

I would like to overwrite the .

Is it possible to generate display:block by processing online?
We apologize for the inconvenience, but we would appreciate it if you could let us know.

Below is the current code.

.main_off{
  display: none;
}
.main_on{
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
  function main_on(){
    // Image loaded!
    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>
  // ## Utility ##
  // code to scan div and call online after loading the image
  vardivs=$(".onload-on-img-onload";
  divs.each(function(idx,div){
    varimgs=$(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>

I do not understand the above code because it is made by mixing various samples (which are quite fake inside the div).
Therefore, I don't mind if the method is completely changed, so I appreciate your cooperation.

javascript html jquery css html5

2022-09-30 20:30

4 Answers

It would be better to "redefine" the style definition you want to override at a higher priority position by reversing the CSS evaluation order.

In particular, since the definition in the body tag is high as a priority, if JavaScript createsElement("style") in the body tag and adds a new definition in insertRule() for the overwritten selector after the onload event fires, you'll probably get what you want to do.

2022-09-30 20:30

I think the following would be fine.

<script>
function main_on(el){
    // Replace classes
    $(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) {
    // If all the imgs under the parent element passed are true, a switchover process is called.
    if($(event.data).hasClass("main_off")&//Prevents double-called
       $(event.data).find("img").filter(function(index,element){
         return!element.complete;
       }).length==0){
           main_on(event.data);
    }
}
// Assign handler to img's online event under div in the online-on-img-onload class
$("div.onload-on-img-onload").each(function(idx,div){
  $(div).find("img").one("load", div, handler); // Hand over top div
});
</script>

2022-09-30 20:30

The descendant selector simplifies it.

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

2022-09-30 20:30

How about this?
Nick Craver answers.
The each portion corresponds to the cache read and fires the load event.
*In response to BLUEPIXY's suggestion, we have modified it to wait for the image loading to complete.

$( 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();
    });

});

#main{
  width —160px;
  height —80px;
  background-color:#aaddcc;
}

.main_off{
  display: none;
}

.main_on{
  display:block;
}

img{
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<divid="contents">
  <img class="loadWait" src="http://i.imgur.com/PWSOy.jpg"/>
  <img class="loadWait" src="http://i.imgur.com/PWSOy.jpg"/>
</div>
<divid="main" class="main_off">main contents!<div>

By the way, the code written in the question has not been converted into jQuery.

 document.getElementsByTagName('div').className="main_on";

jQuery is

$('div').addClass('main_on');

is fine.

2022-09-30 20:30

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656