CODEWITHSUNDEEP
javascriptjqueryhtml
eatsleeptrumpet
eatsleeptrumpet

Reputation: 33

Poor performance even through array of images is preloaded

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.

Upvotes: 3

Views: 267

Answers (4)

micadelli
micadelli

Reputation: 2482

I'd do it like this,

best of both worlds (thanks to Shmiddty's suggestion of calculating image index):

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 + ')');
    }
});​

JSFiddle
http://jsfiddle.net/rzY5L/2/

More of those preloaders could be found here (although outdated in some parts):
http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

Update
The flashing images appears to be related to .png handling (at least on Chrome it seems to flash when changing images). One solution is to create base64 versions of those images. Converter can be found here:
http://www.greywyvern.com/code/php/binary2base64

Base64 Fiddle (no flashing)
http://jsfiddle.net/rzY5L/3/

Upvotes: 2

Alex Rashkov
Alex Rashkov

Reputation: 10015

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

Upvotes: 4

Itai Sagi
Itai Sagi

Reputation: 5615

a working code sample I use:

// 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");

it seems like you need to create a new Image object for every image.

Upvotes: 1

Rafael Emshoff
Rafael Emshoff

Reputation: 2729

from w3Schools : "For each tag in an HTML document, an Image object is created."

I understand you've been using this link. But it seems to me you just have one image object. Try creating a new Image() for every image you are trying to pre-load, i.e. 

var image1 = new Image(); 
image1.src= 'img/1.png'; 

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

...

Here's another useful link.

Upvotes: 1

Related Questions