I am currently working on a script that involves displaying a loading icon until an image is fully loaded, at which point the loading icon should disappear and the image should be shown.
Unfortunately, my current code is not working as intended. Here is a snippet of it:
HTML
<script src="jquery/jquery-1.9.1.js"></script>
<script src="loading.js"></script>
<link rel="stylesheet" type="text/css" href="loading.css"/>
<body>
<img id="image" src="http://www.hdwallpapers3d.com/wp-content/uploads/car11.jpg"/>
<img id="loading" src="loading.gif"></img>
</body>
jQuery
if ($("#image").ready()) {
// code
$("#image").show();
} else {
$("#image").hide();
}
if ($("#image").ready()) {
// code
$("#loading").hide();
} else {
// code
$("#loading").show();
}
CSS
#loading {
width:200px;
height:200px;
}