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

Lazy Load Everything!

Avatar for Sebastiano Armeli Sebastiano Armeli
October 18, 2012
Programming
420
3

Lazy Load Everything!

Talk given at Web Directions South, Sydney - October 2012

Avatar for Sebastiano Armeli

Sebastiano Armeli

October 18, 2012

More Decks by Sebastiano Armeli

See All by Sebastiano Armeli
Cultivate Excellence In Engineering Teams through Continuous Software Engineering
Avatar for Sebastiano Armeli sebarmeli
1
220
From Strategy Definition to Execution with OKRs and Roadmap
Avatar for Sebastiano Armeli sebarmeli
0
230
From Mission to Strategy: going over OKRs and Roadmap
Avatar for Sebastiano Armeli sebarmeli
0
320
Managing a software engineering team
Avatar for Sebastiano Armeli sebarmeli
1
660
Enforcing coding standards in a JS project
Avatar for Sebastiano Armeli sebarmeli
0
620
Enforcing Coding Standards
Avatar for Sebastiano Armeli sebarmeli
1
140
ES6: The future is now
Avatar for Sebastiano Armeli sebarmeli
2
520
EcmaScript 6 - the future is here
Avatar for Sebastiano Armeli sebarmeli
5
7.6k
Dependency management and Package management in JavaScript
Avatar for Sebastiano Armeli sebarmeli
0
790

Other Decks in Programming

See All in Programming
TAKTでAI駆動開発の品質を設計する
Avatar for かとじゅん j5ik2o
7
1.5k
Even G2とAWSで推しのエージェントを召喚しよう！
Avatar for Har1101 har1101
1
120
はてなアカウント基盤 State of the Union
Avatar for cockscomb cockscomb
0
670
The ROI of Quarkus for Spring Boot Applications
Avatar for Holly Cummins hollycummins
0
140
LaravelLive Japan の裏方のすべて — 第188回 PHP勉強会＠東京 (2026-06-24)
Avatar for Suguru Oki / スー suguruooki
2
120
TSKaigi Night Talks 2026_TypeScriptでサプライチェーンの整合性を型に閉じ込める
Avatar for ギークプラス ソフトウェア事業部 geekplus_tech
0
400
Inside Stream API
Avatar for Yuichi.Sakuraba skrb
1
770
[2026年度第1回ORセミナー] 計画最適化ベンチャーと競技プログラミング人材
Avatar for terry-u16 terryu16
0
270
AI 輔助遺留系統現代化的經驗分享
Avatar for James Wang jame2408
1
990
ECSアプリログをFireLensでコスト削減しようとしたけど諦めた話 in Fargate×Node.js
Avatar for アキキー | Akihisa Ikeda akihisaikeda
2
4.2k
Claspは野良GASの夢をみるか
Avatar for てらうちたかし takter00
0
210
技術記事、 専門家としてのプログラマ、 言語化
Avatar for Koutarou Chikuba mizchi
13
6.5k

Featured

See All Featured
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.5k
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
450
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
250
1.3M
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
65
56k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
210k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.2k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
170
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Designing for Performance
Avatar for Lara Hogan lara
611
70k
Visualization
Avatar for Eitan Lees eitanlees
152
17k

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