Javascript 即使预加载了图像阵列，性能也很差_Javascript_Jquery_Html

Javascript 即使预加载了图像阵列，性能也很差

javascript jquery html

Javascript 即使预加载了图像阵列，性能也很差,javascript,jquery,html,Javascript,Jquery,Html,我正在制作一个小部件，显示一个随鼠标位置旋转的3D立方体。我使用if/else实现了这个效果，它将浏览器窗口视为24个独立的水平部分，并根据鼠标触摸的部分显示相应的旋转阶段。在本地运行效果很好，但在线查看时性能会完全下降。我认为预加载图像会有所不同，但这似乎无助于提高性能。我的猜测是，即使图像已经预加载，它们仍然会从服务器调用。每个图像的大小约为2kb。有什么想法吗完整代码如下： <!DOCTYPE html> <head> <title> Move you

我正在制作一个小部件，显示一个随鼠标位置旋转的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>


移动鼠标，旋转立方体
函数mup（）{
var i=0；
imageObj=新图像（）；
images=新数组（）；
图像[0]=“img/1.png”
图像[1]=“img/2.png”
图像[2]=“img/3.png”
图片[3]=“img/4.png”
图片[4]=“img/5.png”
图片[5]=“img/6.png”
图片[6]=“img/7.png”
图片[7]=“img/8.png”
图片[8]=“img/9.png”
图片[9]=“img/10.png”
图片[10]=“img/11.png”
图片[11]=“img/12.png”
图片[12]=“img/13.png”
图片[13]=“img/14.png”
图片[14]=“img/15.png”
图片[15]=“img/16.png”
图片[16]=“img/17.png”
图片[17]=“img/18.png”
图片[18]=“img/19.png”
图片[19]=“img/20.png”
图片[20]=“img/21.png”
图片[21]=“img/22.png”
图片[22]=“img/23.png”
图片[23]=“img/24.png”
对于（i=0；i=0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0=0&&mloc.xCre吃一个大图精灵并更改CSS背景位置，而不是单独加载每个图像。这应该会提高性能，因为您将使用一个图像处理一个HTTP请求，而不是24个图像和请求
您会发现这很有用：特别是如果您想制作更复杂的动画
下面是一个使用精灵的动画示例：
from:“对于HTML文档中的每个标记，将创建一个图像对象。”
我知道您一直在使用。但在我看来，您只有一个图像对象。请尝试为您尝试预加载的每个图像创建一个新图像（）
，即
var image1 = new Image(); 
image1.src= 'img/1.png'; 

var image2 = new Image(); 
image2.src = 'img/2.png' 

...

下面是另一个。
我使用的工作代码示例：
// preload images
var images = new Array()
function preload() {
    for (i = 0; i < preload.arguments.length; i++) {
        images[i] = new Image()
        images[i].src = location.origin + "/PaymentManager" + preload.arguments[i]
    }
}
preload("/res/cards/visa.png","/res/cards/mastercard.png","/res/cards/amex.png","/images/loader.png");

//预加载图像
var images=新数组（）
函数预加载（）{
对于（i=0；i

似乎您需要为每个图像创建一个新的图像对象。
我会这样做
两全其美（感谢Shmidty关于计算图像索引的建议）：
var images=[]，
$stage=$（“.stage”），
oldIndex；
函数预加载（）{
对于（i=0；i

JSFiddle


更多的预加载程序可以在这里找到（尽管在某些地方已经过时）：


更新

闪烁的图像似乎与.png处理有关（至少在Chrome上，更改图像时它似乎会闪烁）。一种解决方案是创建这些图像的base64版本。可以在此处找到转换器：


Base64小提琴（无闪烁）

您在哪里测量性能我将在html中创建24个带有相应src的img标记，并在mousemove中仅显示其中一个。尝试在带有display:none设置的div中添加图像以预加载它们，并在jQuery的$（窗口）上启动javascript。load（）
事件。我认为您的图像可能没有预加载，或者javascript在预加载之前就启动了-这种方式将确保在脚本运行之前加载它们。尝试在Webkit浏览器中查看它（可能Firebug也可以这样做？）查看您的Web Inspector时间线，查看这些图像是否正确加载。

var imageIndex=Math.floor（mloc.x/$（document.width（）*images.length）；Thank infinity-我已经看到了“sprite表”其他地方推荐的技术，可能很快就会给它一个机会，但这一次我想让我的头围绕这个JS预加载业务。做一个大精灵图像的事情，修复预加载是一个浪费时间的精灵解决你的问题，也提高了加载时间（一个大文件只是一个请求，并且该文件的重量应该比所有其他文件的总和都轻），您应该在其他情况下（如图像库）使用预加载。谢谢，这对于如何防止进一步的HTTP请求非常有意义。我将插入该文件并跟进好消息：）老实说，代码很难处理。干掉它怎么样？这很好地解决了性能问题。现在的一个问题是mousemove事件导致图像不断刷新，因为它是firin

var images = [],
    $stage = $('.stage'),
    oldIndex;

function preload() {
    for (i = 0; i < preload.arguments.length; i++) {
        images[i] = new Image();
        images[i].src = preload.arguments[i];
    }
}

preload(
   "http://draves.org/pix/kdn/gen/acanthametra/big%20two%20spike%20star%20copy.small.jpg",
   "http://draves.org/pix/kdn/gen/ascidiae/orange%20ten%20branch%20copy.small.jpg", 
   "http://draves.org/pix/kdn/gen/ascidiae/six%20star%20copy.small.jpg");

$(document).mousemove(function(event) {
    var mloc       = { x: event.pageX },
        imageIndex = Math.floor(mloc.x / $(document).width() * images.length);

    if (oldIndex !== 'undefined' && oldIndex !== imageIndex) {

        oldIndex = imageIndex;
        $stage.css('background-image', 'url(' + images[imageIndex].src + ')');
    }
});