Lazy Load Resources Based on Element Presence

By  on  

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!

Recent Features

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

  • By
    Interview with a Pornhub Web Developer

    Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...

Incredible Demos

  • By
    MooTools Wall Plugin

    One of the more impressive MooTools plugins to hit the Forge recently was The Wall by Marco Dell'Anna.  The Wall creates an endless grid of elements which can be grabbed and dragged, fading in elements as they are encountered.  Let me show...

  • By
    MooTools Overlay Plugin

    Overlays have become a big part of modern websites; we can probably attribute that to the numerous lightboxes that use them. I've found a ton of overlay code snippets out there but none of them satisfy my taste in code. Many of them are...

Discussion

  1. Really interesting and surprisingly simple, I need to look into this for an upcoming build, thanks for sharing.

  2. Does async make 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).

    • Hm, that question is quite old, but it looks like that async = true is not needed.

  3. 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.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!