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

Incredible Demos

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

  • By
    Select Dropdowns, MooTools, and CSS Print

    I know I've harped on this over and over again but it's important to enhance pages for print. You can do some things using simple CSS but today's post features MooTools and jQuery. We'll be taking the options of a SELECT element and generating...

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!