Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

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!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

Incredible Demos

  • By
    PHP / MooTools 1.2 Accordion Helper

    The MooTools Accordion plugin seems to be the plugin that people seem to have the most problems with. It's an awesome plugin, so I can see why so many people want to use it, but I think that may be part of the problem.

  • By
    Image Reflections with CSS

    Image reflection is a great way to subtly spice up an image.  The first method of creating these reflections was baking them right into the images themselves.  Within the past few years, we've introduced JavaScript strategies and CANVAS alternatives to achieve image reflections without...

Discussion

  1. Nick

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

  2. Šime Vidas

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

  3. Stefano

    In reply to Šime Vidas: http://stackoverflow.com/questions/3408805/is-the-async-attribute-property-useful-if-a-script-is-dynamically-added-to-the

    • Šime Vidas

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

  4. John Bacon

    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!