Mootools Lazy Load


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



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.