Add picture before div content loading dynamically jquery

Question

I have a iframe where I will be displaying contents from a text file. It will continously check whether the text file is available in the folder or not. Till the time the text file is not there, I want it to display a gif or image, and after the content arrives it will show the content and gif will be hidden. How can I do this using jquery and HTML. The code I wrote is as follows:

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
    setInterval(my_function,5000); 
    function my_function(){
      console.log("reloading...");
      $('#printdiv').load(location.href);
    }
  </script>
</head>
<body>
 <div>
  <div id="printdiv">
    <p><iframe id = "frame1" src="test.txt" frameborder="0" width="95%">
 <img id = "imgProg" alt = "Progress" src = "ajax-loader.gif" visible = 
"false"/>
</div>
</iframe></p>
  </div>  
</body>
</html>

Help will be highly appreciated

Well, `load()` works by replacing the contents of the element you are loading on with the response. So it's an option that before you execute the load, you could replace it with a loading icon or whatever. And then when the load finishes it would wipe that out. — Taplar, Mar 15 '19 at 19:45
Check out this post. Once the iframe is loaded, hide your image https://stackoverflow.com/questions/9249680/how-to-check-if-iframe-is-loaded-or-it-has-a-content — NickAndrews, Mar 15 '19 at 19:50
Possible duplicate of [How to check if iframe is loaded or it has a content?](https://stackoverflow.com/questions/9249680/how-to-check-if-iframe-is-loaded-or-it-has-a-content) — Demian, Mar 16 '19 at 00:58
@Demian I wanted to show some gif (in the div) or so, before the content is there. The link does not show any such query or possible solution. — XOXO, Mar 16 '19 at 04:55

Demian · Answer 1 · 2019-03-16T16:12:39.527

What I have done below is a simplified method for the iframe waiting to be loaded, and meanwhile in the background a gif is shown. When the iframe is completely loaded, the gif disappears. Be aware that this is specific for jQuery.

I have removed the <img> of your code, this won't work. I have simplified it by adding a class to div#printdiv called load-gif and gave it background styling.

I have also added an opacity function. Otherwise you see a page being loaded in the iframe while the gif is still in the background. To avoid this iframe is invisible (opacity: 0;) until it's fully loaded and then opacity turns back to opacity: 1;.

body {
  height: 40vw;
  width: 100%;
  background-color: #e4e4e4;
}

#printdiv {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e4e4e4;
  height: 100%;
  margin: 3em;
}

#printdiv>p,
body>div,
#frame1 {
  width: 100%;
  height: 100%;
}

#printdiv,
#frame1 {
  background-color: white;
}


/* Below CSS are the important factors, above is just example styling. */

#frame1 {
  opacity: 0; /* set at 0 to avoid gif and iframe mixture in the same div */
}

.load-gif { /* extra class to load gif */
  background: url(https://loading.io/assets/img/ajax.gif) center no-repeat;
  background-size: contain;
}

<!-- begin snippet: js hide: false console: true babel: false -->
<html>

<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
    jQuery(document).ready(function() { // starts DOM page is ready
      jQuery("#frame1").on("load", function() { // when iframe is completely loaded
        jQuery(".load-gif").css("background", "unset"); // removes gif
        jQuery(this).css("opacity", "1"); // set opacity to normal value
      });
    });
  </script>
</head>

<body>
  <div>
    <div id="printdiv" class="load-gif">
      <p>
        <iframe id="frame1" src="/" frameborder="0"></iframe>
      </p>
    </div>
  </div>
</body>

</html>

An alternative way is to remove the load-gif class completely after iframe is loaded. jQuery will look like this:

jQuery(document).ready(function() { // starts DOM page is ready
  jQuery("#frame1").on("load", function() { // when iframe is completely loaded
    jQuery('#printdiv').removeClass("load-gif"); // removes gif class
    jQuery(this).css("opacity", "1"); // set opacity to normal value
  });
});

Add picture before div content loading dynamically jquery

1 Answers1