How to Display Loading Message When an Iframe Is Loading

How to display loading message when an iFrame is loading?

I have done the following css approach:

<div class="holds-the-iframe"><iframe here></iframe></div>

.holds-the-iframe {
  background:url(../images/loader.gif) center center no-repeat;
}

Show loading symbol when iframe gets loaded AND changes its source?

I haven't tested this but as far as i know, the jQuery on("load") event triggers whenever an iframe is reloaded. So instead of using onload as an attribute, use this:

$("#frameId").on("load", function () {
    console.log("reloaded"); // Here you can display the loading.gif file
})

How to show loader until the iframe content fully get loaded in angular 7

You should use a load event. It will emit once iframe is loaded.
So you should display spinner until it will be emitted. It'd look something like it.
d-none is class that sets display:none

<app-spinner *ngIf="isLoading"></app-spinner>
<iframe (load)="isLoading=false" [class.d-none]="isLoading"></iframe>

JavaScript Show loading gif while Iframe loads

You need to do it on the same page using onload event which fires after all iframes are loaded like this:

// show loading image

window.onload = function(){
  // hide loading image
}

---

<img id="img" src="images/loader.gif"/></div>

<script>
window.onload = function(){
   document.getElementById('img').style.display = "none";
}
</script>

Hide loader on iframe load

Try this code.. I not put image.. I just using word.. You can change it to image.

HTML

<iframe src="https://www.test.com/" id="foo"></iframe>
<div id="loadingMessage">Loading...</div>

CSS

#loadingMessage {
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: #ccc;
    top: 0px;
    left; 0px;
    position: absolute;
}

Javascript

$('#foo').ready(function () {
    $('#loadingMessage').css('display', 'none');
});
$('#foo').load(function () {
    $('#loadingMessage').css('display', 'none');
});

Hope can help you.

---

Related Topics