0

I am creating an avatar creator for iPad. Users can select different hair styles, hair colours, skin colours etc.

The page has two components: A selection area (where the selected options are shown as small thumbnails) and a preview area (where the selected options are shown larger).

Each option is saved as a SVG file. Using SVG has a number of advantages:

  1. It remains sharp on Retina displays
  2. The file size of each asset is tiny (as the images are vector based)
  3. The files can be samll and still allow for transparency
  4. The same images can be used for the preview/selection area (The browser just scales them via CSS).

Jquery is used to change the class ids on the oage which in turn effects the CSS code that is called (the CSS holds the SVG images as background images).

There is a large number of options, so to avoid overwhelming the user only relevant options are shown in the selection area. For example, if you tap red hair, then only the red hair styles are shown (all the other hair styles are hidden until the user selects the relevant colour).

Everything works fine, the only draw back is that when the user taps on an option there is a delay while the browser goes to fetch the images from the server.

How can I speed up the loading process, so there is no delay?

Here are some options I have considered:

CSS Sprites Normally CSS sprite would fix this. However, because of the range of options, it isn't practical to create a CSS sprite by hand and none of the automated options support SVG sprite creation. If I switched to PNG, the file sizes would become very large.

Invisible Loading I have created a hidden DIV that has all my images stored as background images (Using the CSS3 multiple background image property). This ensures all the images are loaded so they are available for instant display when the users taps on them. The only drawback is that this causes the page to take a long time initially load.

Are there any better options?

(Unfortunately, I can't provide a link to my work).

big_smile
  • 1,487
  • 4
  • 26
  • 59
  • 2
    I deliberately add this as a comment, not as an answer, because I do not have a worked out example. My suggestion would be to use a kind of ajax loader; whenever someone selects the 'Red hair' option, immediately show the placeholders where the images will appear, but with some kind of loader/gif. Then use javascript to load the images one by one (simultaneously of course) and replace the loader gif by the image just fetched. The images will not load faster, but the user wont mind, as the responsiveness is good! – giorgio Oct 17 '12 at 10:46
  • using defs and/or groups, can't you pack all your shapes into a smaller number of files ? and what about zipping ? – GameAlchemist Oct 17 '12 at 11:03
  • @giorgio That is a good idea thanks! – big_smile Oct 17 '12 at 11:31
  • @VincentPiel Do you have any links that explain what Def/Groups are. I have searched on Google, but I'm not sure how the information there relates to my use case! – big_smile Oct 17 '12 at 11:31
  • http://www.svgbasics.com/defs.html and http://stackoverflow.com/questions/9116954/how-to-translate-svg-code-to-javascript-code for instance... i don't know well enough your need but this might get you started. – GameAlchemist Oct 17 '12 at 12:15
  • http://stackoverflow.com/questions/2753732/how-to-access-svg-elements-with-javascript?rq=1 – GameAlchemist Oct 17 '12 at 12:29

1 Answers1

0

The way I did this in the end was to create a DIV that had all my images attached as a CSS3 multiple background. I then set the DIV to display:none. This loads all the images on page load.

big_smile
  • 1,487
  • 4
  • 26
  • 59