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:
It remains sharp on Retina displays
The file size of each asset is tiny (as the images are vector based)
The files can be samll and still allow for transparency
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).
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.
Related
I have a set of images which I'd like to be visible to a user all at once, without scrolling or swiping. Resizing is ok indeed. The number of images may vary from page to page. There will be some other content on the page as well (title). I'm using Bootstrap as CSS framework, but I'm open to any solution (JS?) if needed.
For example, I have 10 images and Chrome on Android in portrait mode. The solution would arrange the images into a grid of 2 columns and 5 rows and 5x2 in the landscape, resizing accordingly. If there are 18 images, it'd show them 3x6 or 6x3 correspondingly. And so on.
Thanks!
Update
I suck in CSS. But I have good google-searching skills and found nothing on the topic. I've tried container-fluid, row/col, img-responsive combo, but it shows either 3xN or 1xN grid, depending on the width. And not all images are in the viewport.
I am using Adobe Edge Animate to do some CSS3 animations, and using a plugin that converts the SVG images to tags so that the SVG elements are accessible via Javascript. The problem is, when one of the parent DIV containers is hidden and later re-shown, the embedded SVG image is reloaded losing any changes that have been made to it, such as fill colors of shapes, etc.
This also causes some stuttering in the animation when a new image is loaded, as it takes a small amount of time to reload the image.
This problem is not present in Firefox or IE. Is there any way to tell chrome to not re-load embedded images when hidden and shown?
Here is a link to the page in question: Link
If you press the enter key, it triggers part of the animation. You can see after the rotation where it switches out the image and flashes. If you use the built in function via browser console called changeBladeColor() you can see how it resets any changed attributes. This function changes the fill colors of the shapes in the SVG.
Here is an example usage for testing:
changeBladeColor(1, '#ff0000');
It seems the only solution is to position the elements off the page. I had to re-do a lot of my animation, so keep this in mind when doing any projects where you need to display and hide objects (especially ones that may not appear to be doing so).
I've got a client who has a library of images they want to use on a site as fullscreen backgrounds.
I'm using the slideshow functionality + api calls in Supersized js to act as the backgrounds for my slides/sub pages in a site navigation, this is playing nicely with my foreground elements to create a good multiple page effect.
The only issue is that some of their images don't work well centered, and should instead be top aligned (as the focal points of the images get cut off at larger window sizes if they're centered).
At the moment I'm doing a really nasty manual destroy and rebuild to make the adjustment when it's different (currently the images are managed in a CMS so the user just selects a box if the image is be vert aligned). This does the trick, but is clunky and has some nasty jumpiness.
Do you know of a way to do this without destroying/rebuilding OR is there a different plugin that could handle this (and still work with the pagination functionality I've described?)
Thanks guys!
You can try the jQuery.mb.bandGallery plugin. It has the advantage that, in fullscreen, it will resize and center the image to fit the screen.
Or you can try/get inspiration from some of the multiple articles and demos at tympanus.net/codrops, like:
Animated Content Menu
Fullscreen Image Blur
Responsive 3D Panel Layout
My app uses up to 6 svg images layered to create an interactive image. I have found that I cannot mouseclick on any images below the first.
** Edit. Excess code and text removed.
You can make an element insensitive for mouse events by setting the pointer-events attribute to none (see Tinkerbin):
svg > *{opacity:.5}
In essence I cannot do what I want this way. Stacking embedded images results in only the top layer being clickable by the mouse.
An image map works, with some mucking about.
I created a clear image calling it clearOverlay and gave is a usemap value tying it to my image map.
My imagemap I created using a free online app http://www.image-maps.com which took my image allowed me to create my clickable zones and generated the html for me. After cleaning it up and swapping the href values for onclick functions I added the map to my code.
Next problem was getting it to overlay my existing images. I eventually used style="position:relative; top:-300px" forcing it to sit squarely on my image. I'm sure there must be a better way, but at this point that worked for me.
For anyone else doing this don't forget to either place the clearOverlay last in your image list or set the css z-index to higher than everything else to make sure it is sitting on top.
So I now have a stacked svg image, where I can manipulate each svg according to where the user clicks. Its only taken me 5 days! I'm kinda over this coding by yourself lark.
** My image map above will not scale to different sized screens. The next time I try this, I will experiment using a transparent svg with fill zones where I wish to click.
I have an image with 5 logo's and I'd like each logo to change individually from greyscale to color on hover. The obvious solution is to chop the image into the separate logo's with each having both a greyscale and color version and then do a standard css rollover.
However, I can't increase the page load with 5 additional image hits. Is it possible to do this using jquery and one large sprite with all 5 logo's in both greyscale and color and somehow detect which area of the image is being hovered over so the associated color version can then be shown?
You don't want to fiddle with cursor location if you can avoid it. Actually, what you probably want to do is create a CSS sprite - it's one image file that contains all 10 logos (5 color, 5 greyscale). That way, the browser only has to load one image. Then, using CSS, you display pieaces of that image as the background image for your various elements, and vary which piece is displayed using the :hover pseudoclass.
This page will get you started:
http://www.w3schools.com/css/css_image_sprites.asp
And I like to use this page to create sprites and the CSS that goes with it.
http://spritegen.website-performance.org/
Note that this is a somewhat difficult technique to get working the first time, but it saves lots of time and bandwidth in the long run.