How to show a loading icon when a frame is loading

212
November 22, 2016, at 1:29 PM

I have got two frames in a HTML page .

During the period when frame is loading i wanted to show a loading icon , and when frame is completed loading i wanted to hide that .

i have tried this way

<h5 class="element-title">Indices </h5>
  <iframe width="100"  height="200" src="http://www.umich.edu" onload="onLoadHandlerforindices();" >
</iframe>
<h5 class="element-title">My Data </h5>
<iframe src="http://www.w3schools.com" onload="onLoadHandlerformydata();" ></iframe>
</iframe>
<img id="loadImg" src="http://www.cuisson.co.uk/templates/cuisson/supersize/slideshow/img/progress.BAK-FOURTH.gif" alt="loading...">
$( document ).ready(function() {
    $("#loadImg").hide();
});
function onLoadHandlerforindices()
{
    $("#loadImg").show();
}
function onLoadHandlerformydata()
{
    $("#loadImg").show();
}

But the icon is not being shown

This is my fiddle

http://jsfiddle.net/11Lnatr6/3/

Answer 1

Your current logic should be inverted. The onload event triggers after the target element(s) are loaded. Try showing the image and, when the iframe is loaded, hide it! jsFiddle

$( document ).ready(function() {
    $("#loadImg").show();
});
function onLoadHandlerforindices()
{

    $("#loadImg").hide();
}
function onLoadHandlerformydata()
{

    $("#loadImg").hide();
}
Answer 2

The onload="" event is triggered after the page finished loading, not at the start.

Count down how many iframes have to load and hide the image when all are loaded:

<h5 class="element-title">Indices </h5>
  <iframe width="100"  height="200" src="http://www.umich.edu" onload="onFrameLoaded();" >
</iframe>
<h5 class="element-title">My Data </h5>
<iframe src="http://www.w3schools.com" onload="onFrameLoaded();" ></iframe>
</iframe>
<img id="loadImg" src="http://www.cuisson.co.uk/templates/cuisson/supersize/slideshow/img/progress.BAK-FOURTH.gif" alt="    loading...">    
<script type="text/javascript">
var iframesToLoad = 2;
function onFrameLoaded() {
    iframesToLoad--;
    if ( iframesToLoad == 0 )
        $("#loadImg").hide();
}
</script>
READ ALSO
jQuery function works in console but not in code IE9 only

jQuery function works in console but not in code IE9 only

I am trying to set the maxlength attribute for some password input fields. It is working fine for.

249
How to make div visible even if we are hiding the page visibility

How to make div visible even if we are hiding the page visibility

In one single page, I have two different pages with id leftPanel and rightPanel respectively. On clicking expand button, I want that right panel display should be none except a div present on it.

196
Checking button text in PHP, sending value with jQuery

Checking button text in PHP, sending value with jQuery

I have different dropdown menu in a search bar:.

246