Did you find this useful?
Socialize it today.


Display a GIF During IFRAME Loading [JavaScript]

Wednesday, January 30, 2013

If you are including iframe elements in your HTML pages, you may want to consider displaying a simple "loading" indicator to let your end users know that content is being loaded within the iframe instead of just displaying empty space. There are many ways to accomplish this. In this tutorial, we are going to look at one of the ways to do this using JavaScript. This tutorial simply covers how to display an animated image while loading the iframe content.


Demo

In the code below we have included the HTML, CSS, and JavaScript in the same page. Of course, in practice, we would separate the CSS into its own style sheet as well as moving the JavaScript to its own external file. In the example below, all we are doing is immediately displaying the animited GIF in the middle of the iframe element. Once the iframe content completes the loads, the hideLoader() function is executed via the onload event on the iframe element. The JavaScript function then simply changes the display style property for the animated GIF to "none" which essential hides the image.  Click on the "demo" image below to launch an online demo.

demo


<!DOCTYPE html>
<html>
<head>
<title>JavaScript Demo - IFRAME Loader</title>
<style>
#frameWrap {
    position:relative;
    height: 360px;
    width: 640px;
    border: 1px solid #777777;
    background:#f0f0f0;
    box-shadow:0px 0px 10px #777777;
}

#iframe1 {
    height: 360px;
    width: 640px;
    margin:0;
    padding:0;
    border:0;
}

#loader1 {
    position:absolute;
    left:40%;
    top:35%;
    border-radius:20px;
    padding:25px;
    border:1px solid #777777;
    background:#ffffff;
    box-shadow:0px 0px 10px #777777;
}
</style>

<script>
    function hideLoader() { 
        document.getElementById('loader1').style.display = "none"; 
    } 
</script>
</head>
<body> 

<div id="frameWrap"> 
    <img id="loader1" src="loading.gif" alt="loading gif" /> 
    <iframe id="iframe1" src="targetPage.html" onload="hideLoader();"></iframe> 
</div> 
</body>
</html>


Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

JavaScript and jQuery: The Missing Manual HTML CSS and JavaScript Editor Murachs JavaScript and DOM Scripting