I am making a tiny widget which shows a 3D cube that rotates with the position of the mouse. I have achieved the effect with an if/else that looks at the browser window as 24 separate horizontal sections and displays the appropriate stage of rotation based on which section your mouse is touching. Works great locally, but performance when viewed online completely tanks. I thought preloading the images would make a difference, but it doesn’t seem to help performance. My guess is that the images are still being called from the server even though they have been preloaded. The images are about 2kb in size each. Any ideas?
The complete code is below:
<!DOCTYPE html>
<head>
<title> Move your mouse, rotate the cube</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script language="JavaScript">
function rackEmUp() {
var i = 0;
imageObj = new Image();
images = new Array();
images[0]="img/1.png"
images[1]="img/2.png"
images[2]="img/3.png"
images[3]="img/4.png"
images[4]="img/5.png"
images[5]="img/6.png"
images[6]="img/7.png"
images[7]="img/8.png"
images[8]="img/9.png"
images[9]="img/10.png"
images[10]="img/11.png"
images[11]="img/12.png"
images[12]="img/13.png"
images[13]="img/14.png"
images[14]="img/15.png"
images[15]="img/16.png"
images[16]="img/17.png"
images[17]="img/18.png"
images[18]="img/19.png"
images[19]="img/20.png"
images[20]="img/21.png"
images[21]="img/22.png"
images[22]="img/23.png"
images[23]="img/24.png"
for(i=0; i<=23; i++) {
imageObj.src=images[i];
}
}
rackEmUp(); </script>
</head>
<body>
<img class="boxStage" src="img/1.png">
<script type="text/javascript">
$(document).mousemove(function(event){
var mloc = {
x: event.pageX
};
if(
(mloc.x >= 0 && mloc.x <= $(document).width()*0.04)
){
$(".boxStage").attr("src", images[0]);
} else if
(
(mloc.x >= 0 && mloc.x <= $(document).width()*0.08)
){
$(".boxStage").attr("src", images[1]);
} else if
(
(mloc.x >= 0 && mloc.x <= $(document).width()*0.12)
){
$(".boxStage").attr("src", images[2]);
} else if
(
(mloc.x >= 0 && mloc.x <= $(document).width()*0.16)
){
$(".boxStage").attr("src", images[3]);
} else if
(
(mloc.x >= 0 && mloc.x <= $(document).width()*0.20)
){
$(".boxStage").attr("src", images[4]);
} else if
(
(mloc.x >= 0 && mloc.x <= $(document).width()*0.24)
){
$(".boxStage").attr("src", images[5]);
} else if
(
(mloc.x >= 0 && mloc.x <= $(document).width()*0.28)
){
$(".boxStage").attr("src", images[6]);
} else if
(
(mloc.x >= 0 && mloc.x <= $(document).width()*0.32)
){
$(".boxStage").attr("src", images[7]);
} else if
(
(mloc.x >= 0 && mloc.x <= $(document).width()*0.36)
){
$(".boxStage").attr("src", images[8]);
} else if
(
(mloc.x >= 0 && mloc.x <= $(document).width()*0.40)
){
$(".boxStage").attr("src", images[9]);
} else if
(
(mloc.x >= 0 && mloc.x <= $(document).width()*0.44)
){
$(".boxStage").attr("src", images[10]);
} else if
(
(mloc.x >= 0 && mloc.x <= $(document).width()*0.48)
){
$(".boxStage").attr("src", images[11]);
} else if
(
(mloc.x >= 0 && mloc.x <= $(document).width()*0.52)
){
$(".boxStage").attr("src", images[12]);
} else if
(
(mloc.x >= 0 && mloc.x <= $(document).width()*0.56)
){
$(".boxStage").attr("src", images[13]);
} else if
(
(mloc.x >= 0 && mloc.x <= $(document).width()*0.60)
){
$(".boxStage").attr("src", images[14]);
} else if
(
(mloc.x >= 0 && mloc.x <= $(document).width()*0.64)
){
$(".boxStage").attr("src", images[15]);
} else if
(
(mloc.x >= 0 && mloc.x <= $(document).width()*0.68)
){
$(".boxStage").attr("src", images[16]);
} else if
(
(mloc.x >= 0 && mloc.x <= $(document).width()*0.72)
){
$(".boxStage").attr("src", images[17]);
} else if
(
(mloc.x >= 0 && mloc.x <= $(document).width()*0.76)
){
$(".boxStage").attr("src", images[18]);
} else if
(
(mloc.x >= 0 && mloc.x <= $(document).width()*0.80)
){
$(".boxStage").attr("src", images[19]);
} else if
(
(mloc.x >= 0 && mloc.x <= $(document).width()*0.84)
){
$(".boxStage").attr("src", images[20]);
} else if
(
(mloc.x >= 0 && mloc.x <= $(document).width()*0.88)
){
$(".boxStage").attr("src", images[21]);
} else if
(
(mloc.x >= 0 && mloc.x <= $(document).width()*0.92)
){
$(".boxStage").attr("src", images[22]);
} else if
(
(mloc.x >= 0 && mloc.x <= $(document).width()*0.96)
){
$(".boxStage").attr("src", images[23]);
} else
{
$(".boxStage").attr("src", images[0]);
};
}); </script> </body> </html>
EDIT: Thanks everybody for your help – I wound up making one large banner image and changing the CSS background-position property in accordance with the position of the mouse.
Create one big image Sprite and change the CSS background position instead of loading each image separately. This should improve the performance because you’d work with one image hance one HTTP request instead of 24 images and requests
You can find this useful: http://spritely.net/ especially if you want to do more complex animations.
And here is an example of animation with sprites: http://cloud.github.com/downloads/Dhirajkumar/DG_Slider/animated-backgound-image-sprite.htm