マウスの位置に合わせて回転する3D立方体を表示する小さなウィジェットを作成しています。ブラウザウィンドウを24の個別の水平セクションとして表示し、マウスがどのセクションに触れているかに基づいて適切な回転ステージを表示するif/elseを使用して効果を達成しました。ローカルではうまく機能しますが、オンラインで見るとパフォーマンスは完全に低下します。画像をプリロードすることで違いが出ると思いましたが、パフォーマンスには役立たないようです。私の推測では、画像はプリロードされていてもサーバーから呼び出されています。画像のサイズはそれぞれ約2kbです。何か案は？
完全なコードは以下のとおりです。
<!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.