Integratiing PreloadCssImages.jquery.js into ui core

Integratiing PreloadCssImages.jquery.js into ui core


The previous discussion ended with a small consensus that Filament
Group's preloadCssImages plugin would make a good addition to ui core.
Because of the nature of what this plugin does, we should discuss how
best to implement it.
To familiarize yourself, here's a tutorial on using the plugin, and a
link to the script itself:
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/
http://www.filamentgroup.com/examples/preloadImages/scripts/preloadCssImages.jQuery_v5.js
What it does:
The plugin parses through all linked and imported CSS on a page and
builds an array from all image files referenced within the CSS. Then
it preloads all of these images so that they are cached for later use.
This would be useful to UI for the images used in hover/active states
and tiling backgrounds which can not be part of a sprite. It would
also be useful because it will preload images associated with UI
components which may not make an appearance at initial page load, such
as a dialog or datepicker.
A downside to this plugin is it is meant to be used in a controlled
environment where the developer is fully aware that any and all images
referenced in attached CSS files will be loaded. This might cause
problems in applications that link to one giant CSS file which
contains images that may never be used in a particular section of a
site. This could be remedied with better/different architecture of
course, but it's still perhaps reaching beyond UI's turf, and might be
unexpected to developers.
Ways to use it in UI:
1. One way to use the plugin would be to simply run the plugin as it
is currently written. We could call it at the end of all widget
scripts, and set a cookie or global so it never runs more than one
time. This would preload all images in all attached CSS files, which
would likely be desirable to many developers, but we would need to
make it known that it will run by default, and perhaps include an
option in all widgets to tell it not to run, like:
$(...).accordion({preloadCssImages: false});
2. Another way to use it would be to modify the plugin so it scopes
its image array to only those images that are found within CSS
selector blocks that mention UI classes. So in this case, the image in
the first following CSS block would get preloaded, but the image in
the second following CSS block would not:
.ui-accordion { background: url(image.jpg);} /* preloaded*/
.non-ui-element { background: url(image.jpg);} /*not preloaded*/
This method might be safer to implement in any environment, but the
downside is that since the preload script is running anyway, many
developers would want it to just preload all images in the CSS, and
this would only do UI-related images. Of course, there could also be
an option to preload all images instead of just UI ones.
3. A third way would be to do either of the scenarios above, but only
as a standalone utility plugin that the developer would have to call
manually. Essentially, this would mean including our plugin as-is, and
just making it known that if you want UI widget images to be
preloaded, you'll need to call:
$.preloadCssImages();
We could even add an option to the plugin to choose whether it only
loads UI-related images, or all images in the CSS files, and perhaps
have it default to the former.
The downside of this is that UI widgets would NOT have images
preloaded by default. And the developer would have to know to call the
preload function at some point in addition to the widget plugins.
What do you think is the best way to implement the script?