html - Show a loading gif while iframe page content loads

Question

I searched and tried various solutions to what I'm trying to achieve, to no avail...

I'm working on a photography website which has a high volume of images loading in an iframe, which takes a bit of time to load. I want to show a loading gif image in the iframe until the images have finished loading.

Here is the website in question, http://www.chriszachary.com/portfolio

I'm using a javascript motion gallery to allow the user to control image scrolling with their mouse. The images do not scroll until the page is fully loaded. To help minimize confusion, I figured a loading gif image would be more efficient, but I can't pull it off. If you click any of the portfolio categories (wedding, engagement, portrait) you'll notice a significant wait time to load the images.

If anyone could let me know how to achieve this within the iframe, please let me know. And if you could be specific on what code to use and where, I'm a novice :|

Thanks in advance, looking forward to an answer :)

Answer 1

Replace the IFRAME tag in that page with below HTML. The IFRAME is covered with a DIV where the loading image (or any image) is found. The image is at the center of the DIV area and its size can be up to 950x633 pixels. When the IFRAME page is loaded, the loading image will be hidden.

What you need to change is the image URL for your site. You might also want to change the DIV background color (currently set to #FFF).

<style>
#loadImg{position:absolute;z-index:999;}
#loadImg div{display:table-cell;width:950px;height:633px;background:#fff;text-align:center;vertical-align:middle;}
</style>
<div id="loadImg"><div><img src="loading.gif" /></div></div>
<iframe border=0 name=iframe src="html/wedding.html" width="950" height="633" scrolling="no" noresize frameborder="0" onload="document.getElementById('loadImg').style.display='none';"></iframe>