Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Lazy load Everything!
Ähnlich wie Lazy load Everything! (20)
Mehr von Sebastiano Armeli
Mehr von Sebastiano Armeli (11)
Kürzlich hochgeladen
Kürzlich hochgeladen (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
Hinweis der Redaktion
- \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