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

Lazy Load Everything!

A32ee5b05bff6b42a3dd62b5732065f8?s=47 Sebastiano Armeli-Battana
October 18, 2012
Programming
3
230

Lazy Load Everything!

Talk given at Web Directions South, Sydney - October 2012

A32ee5b05bff6b42a3dd62b5732065f8?s=128

Sebastiano Armeli-Battana

October 18, 2012
Tweet

More Decks by Sebastiano Armeli-Battana

See All by Sebastiano Armeli-Battana
A32ee5b05bff6b42a3dd62b5732065f8?s=48 sebarmeli
1
250
A32ee5b05bff6b42a3dd62b5732065f8?s=48 sebarmeli
0
370
A32ee5b05bff6b42a3dd62b5732065f8?s=48 sebarmeli
1
83
A32ee5b05bff6b42a3dd62b5732065f8?s=48 sebarmeli
2
390
A32ee5b05bff6b42a3dd62b5732065f8?s=48 sebarmeli
5
6.5k
A32ee5b05bff6b42a3dd62b5732065f8?s=48 sebarmeli
0
320
A32ee5b05bff6b42a3dd62b5732065f8?s=48 sebarmeli
1
450
A32ee5b05bff6b42a3dd62b5732065f8?s=48 sebarmeli
5
270
A32ee5b05bff6b42a3dd62b5732065f8?s=48 sebarmeli
0
44

Other Decks in Programming

See All in Programming
4f349dbe1d48627445735f7e2c818c97?s=48 layzee
1
210
Dcbf2269af2483cabf43128ad1718c11?s=48 grapecity_dev
0
190
Defdf943f6e9bfc3d3cd856d9d9e0f9b?s=48 takutakahashi
3
250
C5860a8e28b9714d3da61b308c577ef6?s=48 sansuke05
1
130
6a1345d8e6dd15b2c78eff0c331963b1?s=48 dbrumann
0
110
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
250
C11bce314c53f6d9e3096f121d96d7f9?s=48 neripark
3
640
3a53a5136f530c121a196914aecf3936?s=48 tourismgeek
1
130
Bc7114ad3cf4d2d703dc71782e61ba43?s=48 alperhankendi
1
140
B49933741d74e122bc1314b2975e9fc9?s=48 mrtc0
2
960
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
PRO
0
140
948c23c57a850629ff283f2a83088173?s=48 yotuba088
1
590

Featured

See All Featured
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
155
11k
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
7
390
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
93
3k
A9704266587836f7e784235e5073b93e?s=48 jmmastey
10
610
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
188
14k
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
252
19k
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
38
2.3k
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
233
850k
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
19
2k
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
8
550
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
9
580
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
610
55k

Transcript

  1. LAZY LOAD EVERYTHING! Sebastiano Armeli @sebarmeli Web Directions South 2012,

    Sydney Monday, 3 June 13

  2. LAZYNESS?? Monday, 3 June 13

  3. PERFORMANCE Monday, 3 June 13

  4. • Asynchronous calls • Load on-demand LAZY LOADING • window

    ‘onload’ NOT delayed • Driven by Events Monday, 3 June 13

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

  6. <script> </script> Monday, 3 June 13

  7. <body> <!-- Page content --> <img .../> <!--JS concatenated, at

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

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

  9. DRAWBACKS • No parallel downloads • Limit bene!ts from caching

    • Limit bene!ts from CDN • ‘DOMContentLoaded’ still late Monday, 3 June 13

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

  11. <script async src="script.js"></script> HTML 5 Async Monday, 3 June 13

  12. $(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

  13. after ‘onload’ Monday, 3 June 13

  14. What if some JS code depends on a lazy-loaded file?

    Monday, 3 June 13

  15. Monitor readyState attribute Monday, 3 June 13

  16. • Dependecy Management • Intuitive methods to load JS SCRIPT

    LOADERS • Parallel downloads Monday, 3 June 13

  17. $('img').click(function(){ yepnope.injectJs("script.js", function(){ // Executed when the script is loaded

    console.log("Hi!"); }); }); YepNope.js Monday, 3 June 13

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

  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

  20. <img> Monday, 3 June 13

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

    3 June 13

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

    13

  23. JAIL.js • jQuery plugin by @sebarmeli • Easy to use

    -> $(‘img’).jail() • ‘data-src’ attribute • A few con!gurations available Monday, 3 June 13

  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

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

    June 13

  26. Monday, 3 June 13

  27. Monday, 3 June 13

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