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
3
400

Lazy Load Everything!

Talk given at Web Directions South, Sydney - October 2012
Avatar for Sebastiano Armeli

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
Avatar for Sebastiano Armeli sebarmeli
1
140
From Strategy Definition to Execution with OKRs and Roadmap
Avatar for Sebastiano Armeli sebarmeli
0
130
From Mission to Strategy: going over OKRs and Roadmap
Avatar for Sebastiano Armeli sebarmeli
0
260
Managing a software engineering team
Avatar for Sebastiano Armeli sebarmeli
1
570
Enforcing coding standards in a JS project
Avatar for Sebastiano Armeli sebarmeli
0
580
Enforcing Coding Standards
Avatar for Sebastiano Armeli sebarmeli
1
120
ES6: The future is now
Avatar for Sebastiano Armeli sebarmeli
2
470
EcmaScript 6 - the future is here
Avatar for Sebastiano Armeli sebarmeli
5
7.2k
Dependency management and Package management in JavaScript
Avatar for Sebastiano Armeli sebarmeli
0
720

Other Decks in Programming

See All in Programming
Flutterでllama.cppをつかってローカルLLMを試してみた
Avatar for sakuraidayo sakuraidayo
0
120
Instrumentsを使用した アプリのパフォーマンス向上方法
Avatar for hinakko hinakko
0
230
Laravel × Clean Architecture
Avatar for Takayuki bumptakayuki
PRO
0
130
fieldalignmentから見るGoの構造体
Avatar for kuro kuro_kurorrr
0
130
七輪ライブラリー: Claude AI で作る Next.js アプリ
Avatar for suneo3476 suneo3476
1
170
Thank you <💅>, What's the Next?
Avatar for Hayashibara Yuto ahoxa
1
590
Contribute to Comunities | React Tokyo Meetup #4 LT
Avatar for SASAGAWA, Kiyoshi sasagar
0
590
2ヶ月で生産性2倍、お買い物アプリ「カウシェ」4チーム同時改善の取り組み
Avatar for ike ike002jp
1
110
20250426 GDGoC 合同新歓 - GDGoC のススメ
Avatar for Yoshimura Naoya getty708
0
110
REALITY コマンド作成チュートリアル
Avatar for にしうり らく nishiuriraku
0
120
Empowering Developers with HTML-Aware ERB Tooling @ RubyKaigi 2025, Matsuyama, Ehime
Avatar for Marco Roth marcoroth
2
950
Vibe Coding の話をしよう
Avatar for schroneko schroneko
13
3.6k

Featured

See All Featured
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
35
2.7k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
298
20k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
690
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
233
140k
Side Projects
Avatar for Sacha Greif sachag
453
42k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.3k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
85
4.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
32
5.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
23
2.7k

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