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
260
A32ee5b05bff6b42a3dd62b5732065f8?s=48 sebarmeli
0
380
A32ee5b05bff6b42a3dd62b5732065f8?s=48 sebarmeli
1
84
A32ee5b05bff6b42a3dd62b5732065f8?s=48 sebarmeli
2
390
A32ee5b05bff6b42a3dd62b5732065f8?s=48 sebarmeli
5
6.5k
A32ee5b05bff6b42a3dd62b5732065f8?s=48 sebarmeli
0
340
A32ee5b05bff6b42a3dd62b5732065f8?s=48 sebarmeli
1
470
A32ee5b05bff6b42a3dd62b5732065f8?s=48 sebarmeli
5
270
A32ee5b05bff6b42a3dd62b5732065f8?s=48 sebarmeli
0
44

Other Decks in Programming

See All in Programming
08145ecb1ce091d9dd3c328ea2a707fb?s=48 tastapod
PRO
0
150
069a861584701a8b5f72a838bd7e0f2e?s=48 jschaedl
2
140
A0aae1297a0593c1316abdcdb4131e3a?s=48 toedter
0
200
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
1
190
6317140224223dc052beb887078cc810?s=48 nelca
0
130
8847086af047cbf895ab3277b59529fe?s=48 andpad
1
190
Ae276805027a01983503c3edafbdb6b2?s=48 martysuzuki
0
410
28410ec97da16f250a154d9b335c8a32?s=48 quannt
1
130
C951afc0782b7d3d4800e25b4a4938a9?s=48 shinnoki
0
1.4k
Ee785a00eb472c13d572139769a917e4?s=48 ryosogawa
0
330
B31f9495679ee5513a2f9904767336af?s=48 kidokidofire
1
170
Df3a0444cb4726fd231a5d5ea4fe0a34?s=48 hiddenest12
0
290

Featured

See All Featured
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
40
2.4k
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
257
20k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
402
20k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
208
10k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
222
47k
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
109
11k
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
262
11k
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
657
54k
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
53
2.9k
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
318
19k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
779
240k

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