Lazy Load Resources Based on Element Presence
Fans of AMD JavaScript will probably tell you that they love loading only what they need, when they need them. I am one of those people. Let's take a site like mine for example: some pages require a syntax highlighter, some do not. Why make the effort to load the syntax highlighter CSS and JavaScript if there are no pre elements that would require it?
The following is an example of how I occasionally load resources based on DOM contents:
$('article pre').length && (function() {
var mediaPath = '/assets/';
$('').attr({
type: 'text/css',
rel: 'stylesheet',
href: mediaPath + 'css/syntax.css'
}).appendTo(document.head);
var syntaxScript = document.createElement('script');
syntaxScript.async = 'true';
syntaxScript.src = mediaPath + 'js/syntax.js';
document.body.appendChild(syntaxScript);
})();
The arguments against this practice will be (1) concatenating into existing JS and CSS to save on the number of requests and (2) flash of content style changes. The first argument needs to be judged on a per-case basis; if the required CSS and JS is small, it should be concatenated to a file used throughout the site or site subsection. The second argument can always be hushed with a bit of transition magic!
Really interesting and surprisingly simple, I need to look into this for an upcoming build, thanks for sharing.
Does
asyncmake a difference when the script is being injected dynamically (like in the code above)? I thought it only applies on “pre-existing” script elements (i.e. scripts that appear in the HTML source of the page).In reply to Šime Vidas: http://stackoverflow.com/questions/3408805/is-the-async-attribute-property-useful-if-a-script-is-dynamically-added-to-the
Hm, that question is quite old, but it looks like that
async = trueis not needed.The first argument is why I would concatenate this; the difference in load time for this particular functionality would be imperceptible and would ensure the functionality is available whether syntax highlighting is used down the page or on a separate one.