Trying to create an image loader but the image wont load. I know my code is right, any help please. comments are in place
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Image Loading</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="/js/jquery-1.4.2.js" type="text/javascript"></script>
<style type="text/css">
body {
margin: 10px;
background: #ddd;
}
DIV#loader {
border: 1px solid #ccc;
width: 500px;
height: 500px;
}
/**
* While we're having the loading class set.
* Removig it, will remove the loading message
*/
DIV#loader.loading {
background: url(images/spinner.gif) no-repeat center center;
}
</style>
<script type="text/javascript">
// when the DOM is ready
$(function () {
var img = new Image();
// wrap our new image in jQuery, then:
$(img)
// once the image has loaded, execute this code
.load(function () {
// set the image hidden by default
$(this).hide();
// with the holding div #loader, apply:
$('#loader')
// remove the loading class (so no background spinner),
.removeClass('loading')
// then insert our image
.append(this);
// fade our image in to create a nice effect
$(this).fadeIn();
})
// if there was an error loading the image, react accordingly
.error(function () {
// notify the user that the image could not be loaded
})
// *finally*, set the src attribute of the new image to our image
.attr('src', 'images/steep.jpg');
});
</script>
</head>
<body id="page">
<div id="loader" class="loading">
</div>
</body>
</html>