Lazy Load Everything!

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

LAZYNESS?? Monday, 3 June 13

PERFORMANCE Monday, 3 June 13

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

What can we lazy load? Monday, 3 June 13

<body>  <img .../>  <script src=”js/one.min.js”></script> </body> Concatenation Monday, 3 June 13

‘onload’ ‘DOMContentLoaded’ Monday, 3 June 13

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

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 <script> Monday, 3 June 13

$(window).load(function(){ // Async insert <script> 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); }); Async + Event-driven Monday, 3 June 13

after ‘onload’ Monday, 3 June 13

What if some JS code depends on a lazy-loaded ﬁle?
Monday, 3 June 13

Monitor readyState attribute Monday, 3 June 13

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

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

Lazy load assets based on visibility Monday, 3 June 13

<img> Monday, 3 June 13

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

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

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

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

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

Monday, 3 June 13

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

Lazy Load Everything!

Lazy Load Everything!

Sebastiano Armeli

More Decks by Sebastiano Armeli

Other Decks in Programming

Featured

Transcript