ReView plugin that provides functions for dealing with CSS and JS injection.
The intention is that they be used on a successful viewport change via reView.successPolicy()
This allows extra resources to be loaded that are specific to the default view, ensuring a fast core experience.
Based on Conditional Loading for Responsive Designs by Jeremy Keith, albeit heavily tailored to ReView.
ReView automatically enables the default view on large viewports, even if viewport switching is not supported.
I.e. your extra conditionally loaded resource loads in any default view, whether automatic or chosen.
reView.injectCSS(css, id);
reView.injectExtCSS(href, id);
reView.injectJS(src, id);
reView.injectExtJS(src, id, loadFunction); // Final parameter is optional
Each resource requires an id. This prevents repeated injection on multiple viewport switches.
// Success callback
//------------------
reView.successPolicy = function() {
// In 'default' mode
if(reView.mode === 'default') {
// Inject CSS file
reView.injectExtCSS('css/default.css', 'defaultCSS');
// Inject JS file
reView.injectExtJS('js/default.js', 'defaultJS');
// Inject custom font
reView.injectExtCSS('http://fonts.googleapis.com/css?family=Kaushan+Script', 'headerFont');
}
};
The final parameter for injectExtJS()
is very useful for loading dependencies like jQuery.
// Inject jQuery
reView.injectExtJS('jQuery.js', 'jQuery', function() {
// Take advantage of jQuery once loaded
});