Your SlideShare is downloading. ×
0
Lazy load Everything!
Lazy load Everything!
Lazy load Everything!
Lazy load Everything!
Lazy load Everything!
Lazy load Everything!
Lazy load Everything!
Lazy load Everything!
Lazy load Everything!
Lazy load Everything!
Lazy load Everything!
Lazy load Everything!
Lazy load Everything!
Lazy load Everything!
Lazy load Everything!
Lazy load Everything!
Lazy load Everything!
Lazy load Everything!
Lazy load Everything!
Lazy load Everything!
Lazy load Everything!
Lazy load Everything!
Lazy load Everything!
Lazy load Everything!
Lazy load Everything!
Lazy load Everything!
Lazy load Everything!
Lazy load Everything!
Lazy load Everything!
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Lazy load Everything!

3,166

Published on

Slides from my talk at Web Directions South 2012, Sydney

Slides from my talk at Web Directions South 2012, Sydney

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,166
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
26
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. LAZY LOADEVERYTHING! Sebastiano Armeli @sebarmeli Web Directions South 2012, Sydney
    • 2. LAZYNESS??
    • 3. PERFORMANCE
    • 4. LAZY LOADING• Load on-demand• Asynchronous calls• Driven by Events• window ‘onload’ NOT
    • 5. What can we lazy load?
    • 6. <script> </script>
    • 7. Concatenation<body> <!-- Page content --> <img .../> <!--JS concatenated, at the bottom--> <script src=”js/one.min.js”></script></body>
    • 8. ‘DOMContentLoaded’ ‘onload’
    • 9. DRAWBACKS• No parallel downloads• Limit benefits from caching• Limit benefits from CDN• ‘DOMContentLoaded’ still
    • 10. Dynamic <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);
    • 11. HTML 5 Async<script async src="script.js"></script>
    • 12. Async + Event-driven$(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);});
    • 13. after ‘onload’
    • 14. What if some JScode depends on a lazy-loaded file?
    • 15. MonitorreadyState attribute
    • 16. SCRIPT LOADERS• Intuitive methods to load JS• Dependecy Management• Parallel downloads
    • 17. YepNope.js$(img).click(function(){ yepnope.injectJs("script.js", function(){ // Executed when the script is loaded console.log("Hi!"); });});
    • 18. Lazy load assets based on visibility
    • 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(); } }); }}
    • 20. <img>
    • 21. The problemVisible and not visible images are loaded
    • 22. JAIL LazyLoad YUI ImageLoaderor ... mod_pagespeed
    • 23. JAIL.js• jQuery plugin by• Easy to use -> $• ‘data-src’ attribute• A few configurations
    • 24. // Images loaded scrolling down$(function(){ $(‘img’).jail();});// Images loaded after an event$(function(){ $(‘img’).jail({ triggerElement: ‘a.link’, event: ‘click’ });});
    • 25. 4 images downloaded after‘onload’ in different moments!
    • 26. http://yepnopejs.com/ http://requirejs.com https://gist.github.com/3899364http://sebarmeli.github.com/jail @sebarmeli

    ×