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>

window.onload = function(){
document.getElementById('img').style.display = "none";

Hide loader on iframe load

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


<iframe src="" id="foo"></iframe>
<div id="loadingMessage">Loading...</div>


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


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

Hope can help you.

Related Topics

Leave a reply