optimizing for download of several tiny images

@yiannisSep 14.2006

Hi,

I am downloading several (tens) of tiny (0.5K) images in a page. I use a preloader. I see that it takes a lot of time to finish the download due to the number of connections it has to make, the total download size is not much. Is there anything we can do about that in javascript?

In a Java applet I could download one big image containing all my small images and break it up at the client, and this would speed download dramatically since it was just one file instead of several.

Is there anything similar I can do in javascript?

Thank you,
Yiannis

to post a comment

JavaScript

6 Comments(s) _↴

@A1ien51Sep 14.2006 — #nope.....JavaScript can not take an image and break it up into other files.

What are you doing exactly?

Eric

@yiannisauthorSep 14.2006 — #I am developing a multiplayer card game using AJAX. Very interactive page, just barely doable with javascript (lack of proper threads, syncrhonization etc). I'd prefer to have done it in an applet but AJAX looks and feels much smoother.

So I am pretty much done, I am polishing it up. I have had a few weird problems that I have posted here but it seems no one has seen these, they are not a big deal though. Last thing I was trying to see if can be improved was downloading all the card images (along with many others) faster... it takes a while to download all the card images separately.

@A1ien51Sep 14.2006 — #Why don;t you load the images while you need them or as the user is using them? If the user needs them all at once, than they are going to have to wait. Make sure there is a progress bar.

If you code JavaScript in an OO manner you should be fine.

Eric

@yiannisauthorSep 14.2006 — #I do have a progress bar and that's why I can see this effect. I actually load other things as well, such as javascript files and even though a single javascript file can be as large as all the images together it gets downloaded in an instant compared to the images. You see the progress bar jumping to half way and then crawling in the end. I am not bothered by the visual effect of this I just find it a shame to take so much longer to download the same amount of data.

As far as the coding in javascript is concerned, the code is managable but since I want my game have the look a feel of a graphics app (as much as possible) I have a lot of animation with the cards being thrown to the table and collected, at the same time players talking to each other etc and updates from the server coming in in parallel. I could have done these with simple Thread use in Java but in javascript I find myself jumping through hoops with setTimeout and stuff like that. And this actually creates a multithreaded environment, or so it appears at least, but no obvious controls for concurrency.

If you take a look at some of the other threads I posted recently, I don't know if I am doing something wrong or what the problem is but I am getting some visual problems such as buttons not being hidden (only the label hidden but outline/background still visible), dynamic tables not rendering (unless I do self.innerHTML = self.innerHTML) etc. Weird problems I never had to deal with in Java. Of course the end result is much better, no doubt about that.

Thank you

Yiannis

@mrhooSep 14.2006 — #You can create all the cards except face cards with css and html entities-('&spades;') is the spades suit symbol,for example.

This will add a kb or so to the script but remove 40 images.

You can also use an image editor to put multiple images on a single 'grid' image and use style.clip to show the part of the big image called for by each card- this would remove 51 images, but the single file would a pretty big download by itself.

Or you can download just the card images you need just before you need them, instead of all 52 at once. In a real card game each player actually only sees his own hand to begin- unless you are playing 52 pick-up!

But I am curious about why you are using javascript at all- what was wrong with the java app?

@yiannisauthorSep 14.2006 — #Hi mrhoo,

Thanks for the suggestions. To answer your questions:

This is a bridge like game and yes, all the cards would anyway need to be shown in like a minute or less. If I don't preload a player might throw a card on the table and it wouldn't be visible right away or seem like the next player played his card first. So I prefer to keep preloading.

I don't like using the html entities because I have found that they don't always look that good, not all browsers show them the same or even correctly, ie in IE with verdana font the diamond does not show, it prints a box, I don't want to take that path. In fact I used these entities outside of cards, ie to make buttons for players to click on, I was getting some complains that on some computers they were not clear and in the end I even replaced those with images. And to be honest I preferred the easiest way out (had so many other problems to solve). But for a good description of what you are suggesting here is a link if anyone is interested:

http://www.brainjar.com/css/cards/

About the clipping, that's not a bad idea, never tried it before though not sure about performance if I have cards flying quickly from player to table and back, whether that may stress the processor. I can't use it now because I am almost done and will be going live in a few days but I will sure try to use this in the future. Even though it's going to be the same amount of data, 1 connection instead of 52 is going to make a lot! of difference.

Now for the reasons of not using a applet.... I used to have it with applet and now writing it in css. My audience is mainly young people casually using the web to play games and most of them nowadays have WinXP without even the basic java plugin installed (that 1.0 version that used to come with browsers) let alone the latest release. Having them download the plugin would scare (or bore) most of them away... Even my new laptop freezes for a while when it has to open the Java plugin. It's a heavy component. With AJAX things respond faster look smoother, the entire page can interact. I am very happy with it.

Thanks all for the responses. This was not a show stopper problem, I can live with, I just thought if there was a way to save the multiple connections it would be worth asking.

In fact the only problem I have left on the site now is my messages window (a kind of chat) that if hidden and messages go into it then:

div scrollTop = div.scrollHeight

does not seem to have any effect so that if you then open the messages div, all the messages would be there but the scroll bar would be in the middle, (and some times don't realize it) you manually have to take it down. If the div is visible this works fine.

Thank you

yiannis

Also in #JavaScript _↴

javascript onclick event generating new page DOS Cursor Text Effect

Success!

Help @yiannis spread the word by sharing this article on Twitter...

Tweet This

optimizing for download of several tiny images

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

optimizing for download of several tiny images

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴