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
240
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
ITヒヤリハットを整理してみた ～ライフサイクルと原因から考える再発防止策～
Avatar for kouki.miura koukimiura
1
110
自作OSでスライド発表する
Avatar for uyuki uyuki234
1
3.8k
act2-costs.pdf
Avatar for Sumedh Bala sumedhbala
0
120
AWS CDK を「作」ってみた 〜フルスクラッチで見えた CDK の裏側〜 / aws-cdk-from-scratch
Avatar for k.goto gotok365
3
440
霧の中の代数的エフェクト
Avatar for funnycat funnyycat
1
400
PHP Application における Kubernetes 内 gRPC 通信
Avatar for Shin Ohno ganchiku
0
500
なぜ型を書くのか？ TSKaigi2026で改めて考える #tskaigi_smarthr
Avatar for Takuma Kajikawa kajitack
0
380
Welcome to the "Parametricity" 🏙️ − Generic だけど Specific な世界 −
Avatar for TAKASE Kazuyuki guvalif
PRO
1
170
関数型プログラミングのメリットって何だろう？
Avatar for わんこ(Wanko_IT) wanko_it
0
180
PHP に部分適用が来るぞ！……ところで何それ？おいしいの？ #phpcon / phpcon-2026
Avatar for shogogg shogogg
0
250
【やさしく解説 設計編 #1】「ドメイン駆動」と「実装駆動」ってなに？ 〜設計の考え方を、たとえ話で学ぼう〜
Avatar for HideyukiKitao panda728
PRO
1
120
Prismを使った型安全な暗号化_関数型まつり2026
Avatar for _fhhmm _fhhmm
0
140

Featured

See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
440
Done Done
Avatar for chrislema chrislema
186
16k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.8k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.6k
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
280
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
420
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
8
36k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
64
56k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.9k

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