Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Lazy Load Everything!

Lazy Load Everything!

Talk given at Web Directions South, Sydney - October 2012

Sebastiano Armeli

October 18, 2012
Tweet

More Decks by Sebastiano Armeli

Other Decks in Programming

Transcript

  1. LAZY LOAD
    EVERYTHING!
    Sebastiano Armeli
    @sebarmeli
    Web Directions South 2012, Sydney
    Monday, 3 June 13

    View Slide

  2. LAZYNESS??
    Monday, 3 June 13

    View Slide

  3. PERFORMANCE
    Monday, 3 June 13

    View Slide

  4. • Asynchronous calls
    • Load on-demand
    LAZY LOADING
    • window ‘onload’ NOT delayed
    • Driven by Events
    Monday, 3 June 13

    View Slide

  5. What can we
    lazy load?
    Monday, 3 June 13

    View Slide


  6. Monday, 3 June 13

    View Slide







  7. Concatenation
    Monday, 3 June 13

    View Slide

  8. ‘onload’
    ‘DOMContentLoaded’
    Monday, 3 June 13

    View Slide

  9. DRAWBACKS
    • No parallel downloads
    • Limit bene!ts from caching
    • Limit bene!ts from CDN
    • ‘DOMContentLoaded’ still late
    Monday, 3 June 13

    View Slide

  10. var g = document.createElement('script');
    g.type = 'text/javascript';
    g.async = true;
    g.src = 'js/third_party.js';
    var s = document.
    getElementsByTagName('script')[0];
    s.parentNode.insertBefore(g, s);
    Dynamic <br/>Monday, 3 June 13<br/>

    View Slide


  11. HTML 5 Async
    Monday, 3 June 13

    View Slide

  12. $(window).load(function(){
    // Async insert <br/>var g = document.createElement('script');<br/>g.type = 'text/javascript';<br/>g.async = true;<br/>g.src = 'js/third_party.js';<br/>var s = document.<br/>getElementsByTagName('script')[0];<br/>s.parentNode.insertBefore(g, s);<br/>});<br/>Async + Event-driven<br/>Monday, 3 June 13<br/>

    View Slide

  13. after ‘onload’
    Monday, 3 June 13

    View Slide

  14. What if some JS
    code depends on
    a lazy-loaded
    file?
    Monday, 3 June 13

    View Slide

  15. Monitor
    readyState
    attribute
    Monday, 3 June 13

    View Slide

  16. • Dependecy Management
    • Intuitive methods to load JS
    SCRIPT LOADERS
    • Parallel downloads
    Monday, 3 June 13

    View Slide

  17. $('img').click(function(){
    yepnope.injectJs("script.js", function(){
    // Executed when the script is loaded
    console.log("Hi!");
    });
    });
    YepNope.js
    Monday, 3 June 13

    View Slide

  18. Lazy load assets
    based
    on visibility
    Monday, 3 June 13

    View Slide

  19. function loadVisible(el, script, callback) {
    var rect = el.getBoundingClientRect();
    if (rect.top >= 0 && rect.left >= 0 &&
    rect.bottom <= window.innerHeight &&
    rect.right <= window.innerWidth) {
    // Load the script
    yepnope.injectJs(script, function(){
    if (callback) { callback(); }
    });
    }
    }
    Monday, 3 June 13

    View Slide


  20. Monday, 3 June 13

    View Slide

  21. The problem
    Visible and not visible images are loaded
    Monday, 3 June 13

    View Slide

  22. JAIL
    LazyLoad
    YUI ImageLoader
    or ...
    mod_pagespeed
    Monday, 3 June 13

    View Slide

  23. JAIL.js
    • jQuery plugin by @sebarmeli
    • Easy to use -> $(‘img’).jail()
    • ‘data-src’ attribute
    • A few con!gurations available
    Monday, 3 June 13

    View Slide

  24. // Images loaded scrolling down
    $(function(){
    $(‘img’).jail();
    });
    // Images loaded after an event
    $(function(){
    $(‘img’).jail({
    triggerElement: ‘a.link’,
    event: ‘click’
    });
    });
    Monday, 3 June 13

    View Slide

  25. 4 images downloaded after
    ‘onload’ in different moments!
    Monday, 3 June 13

    View Slide

  26. Monday, 3 June 13

    View Slide

  27. Monday, 3 June 13

    View Slide

  28. http://requirejs.com
    http://yepnopejs.com/
    http://sebarmeli.github.com/jail
    @sebarmeli
    https://gist.github.com/3899364
    Monday, 3 June 13

    View Slide