我正在制作一个小部件，它显示一个随鼠标位置旋转的 3D 立方体。我使用 if/else 实现了效果，它将浏览器窗口视为 24 个单独的水平部分，并根据鼠标触摸的部分显示适当的旋转阶段。在本地运行良好，但在线查看时性能完全下降。我认为预加载图像会有所不同，但这似乎对性能没有帮助。我的猜测是，即使图像已经预加载，仍然会从服务器调用这些图像。每个图像大小约为 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>
编辑：感谢大家的帮助-我最终制作了一张大横幅图像并根据鼠标的位置更改了 CSS background-position 属性。