Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (20)
Similaire à Lazy load Everything!
Similaire à Lazy load Everything! (20)
Plus de Sebastiano Armeli
Plus de Sebastiano Armeli (11)
Dernier
Dernier (20)
Lazy load Everything!
- 1. LAZY LOAD EVERYTHING! 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?
- 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 JS code depends on a lazy-loaded file?
- 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 problem Visible and not visible images are loaded
- 22. JAIL LazyLoad YUI ImageLoader or ... 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!
- 29. http://yepnopejs.com/ http://requirejs.com https://gist.github.com/3899364 http://sebarmeli.github.com/jail @sebarmeli
Notes de l'éditeur
- \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