CODEWITHSUNDEEP
javascriptjqueryiframe
user3387046
user3387046

Reputation: 465

Load Iframe with spinner

This code loads correctly the spinner, but how do I hide it after loading completes?

iframe {
    background-image: url("http://jimpunk.net/Loading/wp-content/uploads/loading2.gif");   
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

Upvotes: 10

Views: 36162

Answers (7)

Matt Jaf
Matt Jaf

Reputation: 629

2022 Answer

Iframes have a onLoad attribute that you can set to a function

In react you could do something as such:

const spinner = async () => {
  document.getElementById('spinner').style.display = 'none';
}

Rendered in a Modal as such:

<div
  id="spinner"
  style={{
    backgroundColor: '#ECECFE',
    borderRadius: '8px',
    padding: '20px',
  }}
>
  <Loading spinnerColor="#2E7DAF" text="Loading...." />
</div>
<iframe id="iframeid" src="" width="650px" height="650px" onLoad={spinner} />

Upvotes: 1

Haravikk
Haravikk

Reputation: 3290

I just wanted to add that another way to do this without Javascript is to have the spinner appear behind the iframe, and give the iframe an initially transparent background; so long as the iframe's content has a background colour it will cover the spinner once it loads.

This is a great way to do this if your iframe is "single-use", i.e- it loads embedded content only once and contains no clickable links, or if you don't care about displaying the spinner once the initial content has loaded.*

There are two easy ways to do this:

CSS Background

HTML:

<div class="iframe_container">
    <iframe src="http://example.org"></iframe>
</div>

CSS:

.iframe_container {
    background-image: url('path/to/spinner.gif');
    background-position: center;
    background-repeat: no-repeat;
}
.iframe_container iframe {
    background: transparent;
}

Basically the spinner is a background for .image_container, positioned in the center, and visible because the iframe's background is initially transparent. When the iframe content loads it covers the image, even if an error occurs.

Z-Index

HTML:

<div class="iframe_container">
    <img class="spinner" src="path/to/spinner.gif" />
    <iframe src="http://www.example.org"></iframe>
</div>

CSS:

.iframe_container {
    position: relative;
}
.iframe_container .spinner {
    position: absolute;
    top: 50%;
    left: 50%;
}
.iframe_container iframe {
    background: transparent;
    z-index: 1;
}

In this case we have our spinner embedded as a specific element (which you may need to do for Bootstrap spinners and such), which is positioned using CSS. The iframe in this case covers the image because it has been given a z-index (you may need to use a higher number, if other elements with z-indexes) but the trick is essentially the same.

Notes

As long as it doesn't bother you that the spinner is still technically in the background this works great for a single page-load iframe, or when you only care about the first load.

This is also a good trick to use if you want your site to support users with Javascript disabled, as they won't be left with a spinner that won't disappear.

*If you want to re-use a spinner via Javascript you can still do-so using the z-index option, by setting the spinner's z-index to be higher than the iframe's, like so:

var e = getElementById('my_iframe');
e.onload = function() {
    var e = getElementById('my_spinner');
    e.style.zIndex = 0;
}
e.onunload = function() {
    var e = getElementById('my_spinner');
    e.style.zIndex = 100;
}

This works by pushing the spinner above the iframe when unloading (source is changed) and behind it again on load (new content is visible).

Upvotes: 4

Sijomon S
Sijomon S

Reputation: 43

You can use jquery on load

$('#showFrame').on("load", function () {
    console.log('iframe loaded completely'); //replace with code to hide loader
});

Upvotes: 0

Lucas Bustamante
Lucas Bustamante

Reputation: 17238

Here it is, using font-awesome and jQuery:

$(document).ready(function () {
    showSpinnerWhileIFrameLoads();
});

function showSpinnerWhileIFrameLoads() {
    var iframe = $('iframe');
    if (iframe.length) {
        $(iframe).before('<div id=\'spinner\'><i class=\'fa fa-spinner fa-spin fa-3x fa-fw\'></i></div>');
        $(iframe).on('load', function() {
            document.getElementById('spinner').style.display='none';
        });
    }
}

Upvotes: 3

Jannik Rasmussen
Jannik Rasmussen

Reputation: 397

You could listen to when the iframe is loaded, and then put a class on the iframe, setting background image to nothing.

iframe.onload = function() { 
   // remove spinner
};

Sorry for the short answer, but I'm on a phone atm :)

Upvotes: 2

LOTUSMS
LOTUSMS

Reputation: 10260

As an alternative solution, you can do this as well:

    <div id="spinner">
        <div>
             <img src="http://www.ajaxload.info/images/exemples/25.gif" />    
        </div>
    </div>
    <iframe border=0 name=iframe src="http://www.w3schools.com" width="950" height="633" scrolling="no" noresize frameborder="0" onload="document.getElementById('spinner').style.display='none';"></iframe>

Style the position of the spinner absolute to the page container to center it appropriatedly

Upvotes: 24

osanger
osanger

Reputation: 2362

Try jQuery:

 $( document ).ready(function() {
    $( "iframe .load" ).hide();
  });

and create a second css-class for the loading-action:

    .load{
            background-image: url("http://jimpunk.net/Loading/wp-content/uploads/loading2.gif");   
            background-repeat: no-repeat;
            background-position: 50% 50%;
            position: absolute;
            width:100%;
            height:100%;
        }

iframe{
         position:relative;
        }

Let me know if it works.

Upvotes: 4

Related Questions