Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Lazy Load Everything!
Search
Sebastiano Armeli
October 18, 2012
Programming
3
410
Lazy Load Everything!
Talk given at Web Directions South, Sydney - October 2012
Sebastiano Armeli
October 18, 2012
Tweet
Share
More Decks by Sebastiano Armeli
See All by Sebastiano Armeli
Cultivate Excellence In Engineering Teams through Continuous Software Engineering
sebarmeli
1
160
From Strategy Definition to Execution with OKRs and Roadmap
sebarmeli
0
160
From Mission to Strategy: going over OKRs and Roadmap
sebarmeli
0
280
Managing a software engineering team
sebarmeli
1
600
Enforcing coding standards in a JS project
sebarmeli
0
590
Enforcing Coding Standards
sebarmeli
1
120
ES6: The future is now
sebarmeli
2
480
EcmaScript 6 - the future is here
sebarmeli
5
7.3k
Dependency management and Package management in JavaScript
sebarmeli
0
740
Other Decks in Programming
See All in Programming
OSS開発者という働き方
andpad
5
1.7k
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.5k
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
870
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
780
個人軟體時代
ethanhuang13
0
330
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
2.1k
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
7
2.5k
楽して成果を出すためのセルフリソース管理
clipnote
0
190
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
460
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1032
460k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
GraphQLとの向き合い方2022年版
quramy
49
14k
Six Lessons from altMBA
skipperchong
28
4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
Facilitating Awesome Meetings
lara
55
6.5k
The Language of Interfaces
destraynor
161
25k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Transcript
LAZY LOAD EVERYTHING! Sebastiano Armeli @sebarmeli Web Directions South 2012,
Sydney Monday, 3 June 13
LAZYNESS?? Monday, 3 June 13
PERFORMANCE Monday, 3 June 13
• Asynchronous calls • Load on-demand LAZY LOADING • window
‘onload’ NOT delayed • Driven by Events Monday, 3 June 13
What can we lazy load? Monday, 3 June 13
<script> </script> Monday, 3 June 13
<body> <!-- Page content --> <img .../> <!--JS concatenated, at
the bottom--> <script src=”js/one.min.js”></script> </body> Concatenation Monday, 3 June 13
‘onload’ ‘DOMContentLoaded’ Monday, 3 June 13
DRAWBACKS • No parallel downloads • Limit bene!ts from caching
• Limit bene!ts from CDN • ‘DOMContentLoaded’ still late Monday, 3 June 13
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
<script async src="script.js"></script> HTML 5 Async Monday, 3 June 13
$(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
after ‘onload’ Monday, 3 June 13
What if some JS code depends on a lazy-loaded file?
Monday, 3 June 13
Monitor readyState attribute Monday, 3 June 13
• Dependecy Management • Intuitive methods to load JS SCRIPT
LOADERS • Parallel downloads Monday, 3 June 13
$('img').click(function(){ yepnope.injectJs("script.js", function(){ // Executed when the script is loaded
console.log("Hi!"); }); }); YepNope.js Monday, 3 June 13
Lazy load assets based on visibility Monday, 3 June 13
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
<img> Monday, 3 June 13
The problem Visible and not visible images are loaded Monday,
3 June 13
JAIL LazyLoad YUI ImageLoader or ... mod_pagespeed Monday, 3 June
13
JAIL.js • jQuery plugin by @sebarmeli • Easy to use
-> $(‘img’).jail() • ‘data-src’ attribute • A few con!gurations available Monday, 3 June 13
// Images loaded scrolling down $(function(){ $(‘img’).jail(); }); // Images
loaded after an event $(function(){ $(‘img’).jail({ triggerElement: ‘a.link’, event: ‘click’ }); }); Monday, 3 June 13
4 images downloaded after ‘onload’ in different moments! Monday, 3
June 13
Monday, 3 June 13
Monday, 3 June 13
http://requirejs.com http://yepnopejs.com/ http://sebarmeli.github.com/jail @sebarmeli https://gist.github.com/3899364 Monday, 3 June 13