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 displayingempty 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 jQuery. This tutorial simply covers how to display an animated image while loading the iframe content.
Example
In the code below we have included the HTML, CSS, and JavaScript/jQuery in the same page. Of course, in practice, we would separate the CSS into its own style sheet as well as move the JavaScript/jQuery code to its own external file.
In the example below, all we are doing is immediately displaying the animated 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 essentially hides the image.