Picnic Website Code Tutorials

Loading Gif That Disappears After Page Loads Tutorial

View Demo (NSFW)

Step 1: The CSS

.hidden {
display:none;
}
.visible {
display:block;
position:absolute;
top:0;left:0;
}
		

Step 2: The HTML

<img src="images/loading.gif" id="loading" class="hidden">
		

Step 3: The JS (place directly under the loading.gif!)

document.getElementById("loading").className="visible";var hide=function(){document.getElementById("loading").className="hidden"};var oldLoad=window.onload;var newLoad=oldLoad?function(){hide.call(this);oldLoad.call(this)}:hide;window.onload=newLoad; 
		

Need help adding this or other code to your website? Post it here in the forum! Forum

Sponsors

Top Donators

Friends of Mine