即使通过一系列图像预先加载也表现不佳
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?
我正在制作一个小小部件,显示一个随着鼠标位置旋转的3D立方体。我已经通过if / else实现了效果,它将浏览器窗口视为24个单独的水平部分,并根据鼠标触摸的部分显示适当的旋转阶段。在当地工作很好,但在线观看时的表现完全坦克。我认为预加载图像会有所作为,但它似乎没有帮助性能。我的猜测是,即使已经预先加载了图像,仍然会从服务器调用这些图像。图像大小各约为2kb。有任何想法吗?
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.
编辑:谢谢大家的帮助 - 我最终制作了一个大的横幅图像,并根据鼠标的位置更改了CSS背景位置属性。
4 个解决方案
#1
4
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
创建一个大图像Sprite并更改CSS背景位置,而不是分别加载每个图像。这应该可以提高性能,因为您可以使用一个HTTP请求而不是24个图像和请求来处理一个图像
You can find this useful: http://spritely.net/ especially if you want to do more complex animations.
你可以找到这个有用的:http://spritely.net/,特别是如果你想做更复杂的动画。
And here is an example of animation with sprites: http://cloud.github.com/downloads/Dhirajkumar/DG_Slider/animated-backgound-image-sprite.htm
以下是精灵动画的示例:http://cloud.github.com/downloads/Dhirajkumar/DG_Slider/animated-backgound-image-sprite.htm
更多相关文章
- Nivoslider（在动态ajax内容中）不会在第一次加载时加载图像
- Cordova相机插件ios11无法从库中选取图像
- 缩放图像后的鼠标位置(比率/比率)
- 在透明背景PNG周围获得“方形”框阴影。如何在图像周围弯曲css阴
- 每次在HTML5中加载静态图像
- 从屏幕外动画div，没有绝对位置？
- Javascript来自数据库的图像上的图像映射
- python 简单图像处理（2） 镜像
- 通过分隔符计数和位置从数据框中提取特定文本