How would I (or should I) extend Modernizr.load() to preload images?

Question

The idea is that the page /something/index.html is loaded. But, before I show it, its dependencies (css and images in this case) are preloaded.

Modernizr.load({
    load: ['/something/styles.css', '/something/image1.jpg'],
    complete: showFile
 });

I've looked into Paul Irish's "imagesLoaded" jQuery plug in, but I prefer the simplicity of using the loader I already have. I know YepNope (and Modernizr.load) aren't designer as generic preloaders, but I feel like this is the cleanest way to do this.

Would appreciate any thoughts on how to implement image preloading into a Modernizr/YepNope load script.

nz

Answer 1

On the yepnope documentation, it is specified that the preload! prefix "should" work on some other mime types.

You can try

Modernizr.load('preload!something/image1.jpg');

This work for me.

Don't forget to add the prefix plugin (else you will get an error when the js engine tries to execute the image) :

yepnope.addPrefix( 'preload', function ( resource ) {
    resource.noexec = true;
    return resource;
});