Advanced Search

Mootools Lazy Load

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*
  2.  * Lazy Load de imagenes con Mootools http://uninstallme.com/lazy-load-de-imagenes-con-mootools
  3.  * Basado en lazierLoad – Javascript Image Lazy Loader for Prototype http://www.bram.us/projects/js_bramus/lazierload/
  4.  */
  5.  
  6.  
  7. window.addEvent('domready', function(){
  8. 	$$('img').each(function(el){
  9. 		new Kcmr.MooLazyLoad(el);
  10. 	});
  11. });
  12.  
  13.  
  14. var Kcmr = Kcmr || {};
  15.  
  16. Kcmr.MooLazyLoad = new Class({
  17. 	Implements: Options,
  18. 	options: {
  19. 		blank: 'images/blank.gif'
  20. 	},
  21.  
  22. 	initialize: function(element, options){
  23. 		this.setOptions(options);
  24. 		this.element = element;		
  25. 		this.originalSrc = this.element.src; // guardamos el atributo src original
  26. 		this.hideNotOnViewport(); // ocultacion inicial de las imagenes no visibles
  27. 		this.showOnViewport(); // mostramos imagenes en el area visible de la ventana con el evento scroll
  28. 	},
  29.  
  30. 	hideNotOnViewport: function(){
  31. 		if(!this.isOnViewport()){
  32. 			this.element.src = this.options.blank;
  33. 			this.element.fade('hide');
  34. 		}
  35. 	},
  36.  
  37. 	showOnViewport: function(){
  38. 		window.addEvent('scroll', function(){
  39. 			if(this.isOnViewport()){
  40. 				this.element.fade('in');
  41. 				this.element.src = this.originalSrc;				
  42. 			}
  43. 		}.bind(this));
  44. 	},
  45.  
  46. 	isOnViewport: function(){		
  47. 		// Calcular la posicion Y de un elemento en pantalla http://tinyurl.com/yax5w2o		
  48. 		var a = window.getScroll().y; // espacio no visible por arriba
  49. 		var b = this.element.getCoordinates().top; // posicion top de la imagen respecto a window 
  50. 		var c = window.getSize().y; // altura del area visible de la ventana
  51. 		var d = this.element.height; // altura de la imagen
  52.  
  53. 		var e = (b - a) + (d / 2);
  54. 		return (e < c);	// esta en el area visible de la ventana?	
  55. 	}
  56. });

URL: http://uninstallme.com/ejemplos/mootools-lazy-load/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.