0

I have a JSON file referencing about 300 images used in an animation displayed within my Wordpress theme. In my header.php, I'm using the following jQuery to preload all images on DOM load.

function preload(images) {
  jQuery(images).each(function () {
    jQuery('<img />').attr('src',this).appendTo('body').css('display','none');
  });
}

jQuery(document).ready(function() {
  preload([
     "<?php bloginfo('template_directory'); ?>/library/images/img001.jpg",
     "<?php bloginfo('template_directory'); ?>/library/images/img002.jpg",
          //about 300 more...
  ]);
});

The issue is the images are 900x400px so it takes about 30 seconds for all 300 HTTP requests to go through. I'm thinking I could decrease load time if I load images with just one HTTP request. Is this possible? Thanks in advance.

dcd0181
  • 1,493
  • 4
  • 29
  • 52

3 Answers3

3

Yes it is possible using sprites (No, not the soda). This is when images are packed into one big image.

You can check out PHP's GD library to generate the compiled image for you. Of course, compile once in advance, not every request or it will kill your server.

Taking it to the extreme, you can send the images as a base64 string. That way, the string can be compressed on the server and decompressed on the client with an algorithm like LZW. To add to that, you can apply GZIP on transport.

On the client side, you receive the image as one big image. If you encoded them in base64, you can use the data URI scheme to display the image using the base64 string.

After all that, you can animate the images using the spriting technique, moving the images per frame.

Additional tips:

  • compress the images using something like Adobe Fireworks:

    • Remove unused colors
    • reduce quality to an accepted degree
    • use a lightweight format like JPG

  • Split the animation into sections. This technique was used on Google's mother's day doodle, where the animation was split into parts and not per frame.

Community
  • 1
  • 1
Joseph
  • 117,725
  • 30
  • 181
  • 234
1

In order to accomplish one single HTTP request you'd need to base64_encode the files and send them as a a json_encoded list for example. And on the client side do something like:

jQuery.get('json_list_of_images.php', function(list) {
    for(i in list) {
        $('<img />').attr('src', list[i])
    }
});

That would increase the volume of data by 33%, and it would also mean that the images you will be showing are fully loaded into memory, that's 300*900*400*1.33*4 = 0.535100698GB

Mihai Stancu
  • 15,848
  • 2
  • 33
  • 51
0

The reason it takes 30 seconds is because you're trying to load 300 images. No amount of optimization will make that a reasonably fast task. You need to rethink your process. For example, you could:

  1. Load the first image and display it
  2. Begin loading the second image while the first is displayed
  3. Display the second image and repeat step 2 for remaining images

There's absolutely zero need to load 300 large images like that all at once.

Chris
  • 27,596
  • 25
  • 124
  • 225
  • The reason I'm loading all images at once is because the animation is about 15 sec long with a fps of 24, so sequential loading really wouldn't help in my situation. – dcd0181 May 26 '12 at 10:45
  • OK, so your animation is just flat out ridiculous for a web based app. I don't know what it is you're trying to accomplish, but it's not reasonable. It never will work optimally the way you envision. This is just bad design, period. This kind of thing is precisely why The Daily WTF exists. – Chris May 26 '12 at 10:46
  • If it's an animation you can memory manage by "dropping" all images that have already been presented to the user. If you do this while using external image files, you'll be able to retrieve them from cache when you need them a second time. – Mihai Stancu May 26 '12 at 10:50
  • @Chris-Not really looking for an opinion on design, if it really matters, the images were generated from an existing flash file (not mine) that's too complicated to recreate with pure JSON or WebGL. – dcd0181 May 26 '12 at 10:54
  • I understand that my opinion on your design means squat, but the fact remains that you're not going to be able to accomplish what you're trying to do using plain old javascript and 300 900x400 image files. It's a bit like trying to drain a bath tub through a straw. Sure, you may succeed eventually, but at what cost? I can *guarantee* you that what you're doing will drive visitors away from your site in droves. – Chris May 26 '12 at 10:59