type: widget || utility

release: 0.0

priority: high || medium || low

status: in planning

documentation: url || N/A

demo: url || N/A

 

 

---

 

1 - Description:

 

This is a developer utility which executes without any notification to the user, but the end result to the user is a more pollished and seamless user experience. A UI that transitions cleanly between states and views can reinforce trust in an application by the user.

 

This utility is useful for pre-caching background and foreground images for portions and states of an interface which have not yet been used by the user. By preloading these images, the UI will appear more seamless to the user, since images will not "blink" into place in a lazy-load fashion.

 

The preloader will also provide options for reporting load status, so a developer may use it to power a visual progress indicator for something like a slideshow. This would provide the user with feedback that assets are being loaded, and how quickly the load is progressing.

 

Filament's Article (preloads images from CSS):

http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/

 

---

 

2 - Visual designs:

 

non-visual utility

 

---

 

3 - Functional Specifications/Requirements:

 

This plugin can be called like this:

 

$.preloadImages();

 

Available options:

• uiImagesOnly: boolean
• additionalImages: Array of full image paths
• parseCSS: boolean, default:  true. False prevents CSS parsing for image URLs
• errorDelay: milliseconds,
• simultaneousCacheLoading: number of simultaneous http requests allowed for images. Defaults to 2. Setting to 1 frees up a channel for browsers that have a max limit.
• loadStatus: object. contains loadedImgs and totalImgs. These properties can be used to drive a progress indicator, if desirable.

  

 

---

 

4 - Markup & Style:

 

     4.1 Initial markup examples

n/a

 

     4.2 Recommended transformed HTML markup

n/a

 

     4.3 Accessibility recommendation

n/a

 

     4.4 CSS & Theme

n/a

 

 

---

 

5 - Related jQuery Plugin:

Filament's Script (preloads images from CSS): http://www.filamentgroup.com/examples/preloadImages/scripts/preloadCssImages.jQuery_v5.js

Ariel's Demo (preloads images from array):

http://demos.flesler.com/jquery/preload/url/

 

 

---

 

6 - Open issues being discussed

 

(Use this area to place things that we're hashing out like featuresand options we're not sure we should include, questions about how this fits into UI and relates to other widgets and utilities, known problems, whether features should be broken across multiple releases, etc.)

 

---