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
How to Add a New Object (Key-Value Pair) to an Array in JavaScript
Open Html5 Date Picker on Icon Click
How to Open Specific Web Browsers Using Hyperlinks
Re-Render Same Component on Url Change in React
Select Li Element With Arrow Keys (Up and Down) Using JavaScript (Jquery)
Append Data to Json Array Issue
How to Stop the Iframe from Constantly Reloading After Setinterval (Jquery)
Redirect Changing Page Url But Not Rendering New Page
Convert Image from Url to Base64
Transforming Null into Empty String in JavaScript
How to Allow Only English Letters in Input Fields
Open Link in a Window Using Script (Google Sheet)
Determine If String Is in Base64 Using JavaScript
Disable/Hide Download Button in Iframe on Default Pdf Viewer
How to Include External JavaScript Library in Reactjs