Created
May 4, 2011 18:35
-
-
Save apinstein/4486738afb5556a619d7 to your computer and use it in GitHub Desktop.
YUI3 ImageLoader with progressive enhancement.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <body> | |
| <p>Below is a progressively-enhanced dynamic loader using YUI3 ImageLoader.</p> | |
| <p>To see the non-javascript mode, disable javascript in your browser and reload.</p> | |
| <!-- Unfortunately you have to put the img block twice; once for noscript and once without since if JS is enabled then the noscript tags may not be populated --> | |
| <img class="loadable" data-src="http://www.google.com/images/nav_logo65.png" /> | |
| <noscript> | |
| <img src="http://www.google.com/images/nav_logo65.png" /> | |
| </noscript> | |
| <button id="loadThatImage">Trigger ImageLoader</button> | |
| <script type="text/javascript" src="http://yui.yahooapis.com/combo?3.3.0/build/yui/yui-min.js&3.3.0/build/oop/oop-min.js&3.3.0/build/dom/dom-min.js&3.3.0/build/dom/dom-style-ie-min.js&3.3.0/build/event-custom/event-custom-min.js&3.3.0/build/event/event-base-min.js&3.3.0/build/pluginhost/pluginhost-min.js&3.3.0/build/node/node-min.js&3.3.0/build/event/event-base-ie-min.js&3.3.0/build/attribute/attribute-base-min.js&3.3.0/build/base/base-base-min.js&3.3.0/build/imageloader/imageloader-min.js&3.3.0/build/event/event-delegate-min.js"></script> | |
| <script> | |
| YUI().use('node', 'imageloader', function (Y) { | |
| window.Y = Y; | |
| var loadImgGroup = new Y.ImgLoadGroup(); | |
| Y.all('.loadable').each(function(imgEl) { | |
| loadImgGroup.registerImage({ | |
| domId: imgEl.generateID(), | |
| srcUrl: imgEl.getAttribute('data-src') | |
| }); | |
| }); | |
| Y.one('#loadThatImage').on('click', function() { | |
| loadImgGroup.fetch(); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment