Mootools - Assets.Images


/ Published in: JavaScript
Save to your folder(s)

This snippet assumes that you have a container `div` with an id of "images".

It also assumes that each img element inside your container div has the CSS property `visibility: hidden`


Copy this code and paste it in your HTML
  1. var loadImages = function(strSelector)
  2. {
  3. var arrImages = $(strSelector).getElements('img');
  4. var arrSources = [];
  5. arrImages.each(function(eleImage) {
  6. arrSources.push(eleImage.get('src'));
  7. });
  8.  
  9. new Asset.images(arrSources, {
  10. onComplete: function() {
  11. var objChain = new Chain;
  12. arrImages.each(function(eleImage) {
  13. objChain.chain(function() {
  14. eleImage.set('tween', {
  15. duration: 300
  16. }).tween('opacity', 0, 1);
  17. this.callChain.delay(100, this);
  18. });
  19. });
  20. objChain.callChain();
  21. }
  22. } );
  23. }
  24.  
  25. window.addEvent(
  26. 'domready',
  27. function()
  28. {
  29. loadImages( $('images') );
  30. }
  31. );

URL: mootoolsLoadImages

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.