Other JavaScript Libraries - Beginning JavaScript - page 511

Modernizr.load({
test: Modernizr.draggable,
nope: "draggable-polyfill.js"
});
This type of behavior is ideal in these situations. You don't want or need to load a polyfill for the
draggable attribute/property for modern browsers, but you do for older browsers, like IE8, that do
not support it.
Modernizr's load() method also lets you run multiple tests. Instead of passing a single yepnope
object, you can pass an array of them, like this:
Modernizr.load([{
test: Modernizr.draggable,
nope: "draggable-polyfill.js"
},
{
test: document.addEventListener,
nope: "event-polyfill.js"
}]);
This code passes an array of two yepnope objects to the load() method. The first object is
the same custom draggable test from the previous example. The second object checks if the
browser supports the document.addEventListener() method; if it doesn't, Modernizr loads an
event polyfill.
Modernizr loads external resources asynchronously. This means that the browser will continue to
load the rest of the page while Modernizr downloads and executes the external resources. This can
cause issues if your page relies on those resources; you have to ensure they are completely loaded
before you attempt to use them.
You can avoid this type of issue by adding a complete property to your yepnope object. This
property should contain a function, and it executes regardless of what happens when all (or even
none) of the resources are finished loading. For example:
function init() {
alert("Page initialization goes here!");
}
Modernizr.load([{
test: Modernizr.draggable,
nope: "draggable-polyfill.js"
},
{
test: document.addEventListener,
nope: "event-polyfill.js",
complete: init
}]);
This new code adds two changes to the previous example. First, it defines a function called init() .
This function would normally contain code to initialize the JavaScript used on the page (such as
setting up event listeners).