Use Modernizr and jQuery to show a loading gif while an iframe loads

gistfile1.md

Hat toss to CSS Tricks for setting me on the right track using Modernizr to check if js is enabled or not to avoid permanently hiding the iframe from non-js users.

http://css-tricks.com/snippets/jquery/display-loading-graphic-until-page-fully-loaded/

Also much love to Ajax Load for the custom colored loading gif.

http://www.ajaxload.info/

First, set up your html for a container, image and iframe

<div class="frame_container">
	<img src="loading.gif" class="loading" />
	<iframe id="my_iframe" src="[some url]"></iframe>
</div>

Next style your elements. I'm using .no-js and .js that are provided by Modernizr on the html element to avoid showing the image and hiding the iframe on browsers w/ javascript turned off, very important for usability. Next I set the container to position: relative and the image to position: absolute while centering it in the container.

.no-js .loading {
	display: none;
}
.js .loading {
	display: block;
	left: 150px;
	position: absolute;
	top: 300px;
}
.js #my_iframe {
	visibility: hidden;
}
.frame_container {
	position: relative;
}

Last is my script that watches for the iframe to finish loading, then swaps out the loading img for the iframe.

$('#my_iframe').load(function() {
	$('.loading').css('display', 'none');
	$('.js #my_iframe').css('visibility', 'visible');
});

I used visibility for the iframe instead of display because I didn't want the container or other elements on the page shifting around after the switch. If you are setting your container to a specific size you could use display instead

Thanks! This a handy reference.