Advanced Search

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`

Expand | Embed | Plain Text

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.