Slide 1
Slide 1 text
LAZY LOAD
EVERYTHING!
Sebastiano Armeli
@sebarmeli
Web Directions South 2012, Sydney
Monday, 3 June 13
Slide 2
Slide 2 text
LAZYNESS??
Monday, 3 June 13
Slide 3
Slide 3 text
PERFORMANCE
Monday, 3 June 13
Slide 4
Slide 4 text
• Asynchronous calls
• Load on-demand
LAZY LOADING
• window ‘onload’ NOT delayed
• Driven by Events
Monday, 3 June 13
Slide 5
Slide 5 text
What can we
lazy load?
Monday, 3 June 13
Slide 6
Slide 6 text
Monday, 3 June 13
Slide 7
Slide 7 text
Slide 8
Slide 8 text
‘onload’
‘DOMContentLoaded’
Monday, 3 June 13
Slide 9
Slide 9 text
DRAWBACKS
• No parallel downloads
• Limit bene!ts from caching
• Limit bene!ts from CDN
• ‘DOMContentLoaded’ still late
Monday, 3 June 13
Slide 10
Slide 10 text
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
Monday, 3 June 13
Slide 11
Slide 11 text
HTML 5 Async
Monday, 3 June 13
Slide 12
Slide 12 text
$(window).load(function(){
// Async insert
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
Slide 13
Slide 13 text
after ‘onload’
Monday, 3 June 13
Slide 14
Slide 14 text
What if some JS
code depends on
a lazy-loaded
file?
Monday, 3 June 13
Slide 15
Slide 15 text
Monitor
readyState
attribute
Monday, 3 June 13
Slide 16
Slide 16 text
• Dependecy Management
• Intuitive methods to load JS
SCRIPT LOADERS
• Parallel downloads
Monday, 3 June 13
Slide 17
Slide 17 text
$('img').click(function(){
yepnope.injectJs("script.js", function(){
// Executed when the script is loaded
console.log("Hi!");
});
});
YepNope.js
Monday, 3 June 13
Slide 18
Slide 18 text
Lazy load assets
based
on visibility
Monday, 3 June 13
Slide 19
Slide 19 text
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
Slide 20
Slide 20 text
Slide 21
Slide 21 text
The problem
Visible and not visible images are loaded
Monday, 3 June 13
Slide 22
Slide 22 text
JAIL
LazyLoad
YUI ImageLoader
or ...
mod_pagespeed
Monday, 3 June 13
Slide 23
Slide 23 text
JAIL.js
• jQuery plugin by @sebarmeli
• Easy to use -> $(‘img’).jail()
• ‘data-src’ attribute
• A few con!gurations available
Monday, 3 June 13
Slide 24
Slide 24 text
// Images loaded scrolling down
$(function(){
$(‘img’).jail();
});
// Images loaded after an event
$(function(){
$(‘img’).jail({
triggerElement: ‘a.link’,
event: ‘click’
});
});
Monday, 3 June 13
Slide 25
Slide 25 text
4 images downloaded after
‘onload’ in different moments!
Monday, 3 June 13
Slide 26
Slide 26 text
Monday, 3 June 13
Slide 27
Slide 27 text
Monday, 3 June 13
Slide 28
Slide 28 text
http://requirejs.com
http://yepnopejs.com/
http://sebarmeli.github.com/jail
@sebarmeli
https://gist.github.com/3899364
Monday, 3 June 13