Responsive Viewport

Conditional Load


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.

Example Code

// 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('', 'headerFont'); } };

JavaScript Load Callback

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 });