Skip to content

Instantly share code, notes, and snippets.

@chardcastle
Created July 5, 2010 22:26
Show Gist options
  • Save chardcastle/464763 to your computer and use it in GitHub Desktop.
Save chardcastle/464763 to your computer and use it in GitHub Desktop.
Image preloading in JQuery
/*
* Written by Chris Hardcastle
* Pre-load an image using jQuery
* Example HTML layout
<div id="globalInner">
<div id="loading"><!-- css loading gif --></div>
<div id="stage"></div>
</div>
*/
/*
If object is set, use it or make one.
Must be declared outside of jquery dom ready call
*/
var image = image || {};
image.load = {
ready:function(){
$("#globalInner")
.find("#loading")
.hide()
.end()
.find('img')
.fadeIn(2000);
}
}
$(function(){
$('body')
.find("stage")
.empty() // clear stage
.end()
.fadeTo(0,1,function(){ // force call back
$("<img onload=\"javascript:image.load.ready()\">")
.attr("src","/images/large-image.jpg")
.attr("alt","large image")
.css("display",'none')
.appendTo('#stage');
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment