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

Lazy Load Everything!

Sebastiano Armeli
October 18, 2012
Programming
3
400

Lazy Load Everything!

Talk given at Web Directions South, Sydney - October 2012

Sebastiano Armeli

October 18, 2012
Tweet

More Decks by Sebastiano Armeli

See All by Sebastiano Armeli
Cultivate Excellence In Engineering Teams through Continuous Software Engineering
sebarmeli
1
110
From Strategy Definition to Execution with OKRs and Roadmap
sebarmeli
0
110
From Mission to Strategy: going over OKRs and Roadmap
sebarmeli
0
250
Managing a software engineering team
sebarmeli
1
540
Enforcing coding standards in a JS project
sebarmeli
0
570
Enforcing Coding Standards
sebarmeli
1
110
ES6: The future is now
sebarmeli
2
470
EcmaScript 6 - the future is here
sebarmeli
5
7.1k
Dependency management and Package management in JavaScript
sebarmeli
0
700

Other Decks in Programming

See All in Programming
AWS re:Invent 2024個人的まとめ
satoshi256kbyte
0
100
Simple組み合わせ村から大都会Railsにやってきた俺は / Coming to Rails from the Simple
moznion
3
2.1k
週次リリースを実現するための グローバルアプリ開発
tera_ny
1
1.2k
return文におけるstd::moveについて
onihusube
1
1.4k
AWSのLambdaで PHPを動かす選択肢
rinchoku
2
390
Azure AI Foundryのご紹介
qt_luigi
1
210
歴史と現在から考えるスケーラブルなソフトウェア開発のプラクティス
i10416
0
300
React 19でお手軽にCSS-in-JSを自作する
yukukotani
5
560
ある日突然あなたが管理しているサーバーにDDoSが来たらどうなるでしょう？知ってるようで何も知らなかったDDoS攻撃と対策 #phpcon.2024
akase244
2
7.7k
GitHub CopilotでTypeScriptの コード生成するワザップ
starfish719
26
6k
テストコード書いてみませんか？
onopon
2
340
テストコードのガイドライン 〜作成から運用まで〜
riku929hr
7
1.4k

Featured

See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
RailsConf 2023
tenderlove
29
970
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
How to train your dragon (web standard)
notwaldorf
89
5.8k
Designing Experiences People Love
moore
139
23k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Music & Morning Musume
bryan
46
6.3k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.6k
Being A Developer After 40
akosma
89
590k
KATA
mclloyd
29
14k
Typedesign – Prime Four
hannesfritz
40
2.5k

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