LazyLoad.js

/*
---
description:     LazyLoad

authors:
  - David Walsh (http://davidwalsh.name)
  - Thomas Dullnig (http://thomasdullnig.blogspot.com) added the vertical/horizontal mode

license:
  - MIT-style license

requires:
  core/1.2.1:   '*'

provides:
  - LazyLoad
...
*/
var LazyLoad = new Class({

	Implements: [Options,Events],

	/* additional options */
	options: {
		range: 200,
		image: 'blank.gif',
		resetDimensions: true,
		elements: 'img',
		container: window,
		fireScroll: true,
		mode: 'vertical' //horizontal
	},

	/* initialize */
	initialize: function(options) {
	
		/* vars */
		this.setOptions(options);
		this.container = document.id(this.options.container);
		this.elements = $$(this.options.elements);
		var axis = (this.options.mode == 'vertical' ? 'y': 'x');
		this.containerDim = this.container.getSize()[axis];
		this.start = 0;

		/* find elements remember and hold on to */
		this.elements = this.elements.filter(function(el) {
			/* reset image src IF the image is below the fold and range */
			if(el.getPosition(this.container)[axis] > this.containerDim + this.options.range) {
				el.store('oSRC',el.get('src')).set('src',this.options.image);
				if(this.options.resetDimensions) {
					el.store('oWidth',el.get('width')).store('oHeight',el.get('height')).set({'width':'','height':''});
				}
				return true;
			}
		},this);
	
		/* create the action function */
		var action = function() {
			var cpos = this.container.getScroll()[axis];
			if(cpos > this.start) {
				this.elements = this.elements.filter(function(el) {
					if((this.container.getScroll()[axis] + this.options.range + this.containerDim) >= el.getPosition(this.container)[axis]) {
						if(el.retrieve('oSRC')) { el.set('src',el.retrieve('oSRC')); }
						if(this.options.resetDimensions) {
							el.set({
								width: el.retrieve('oWidth'),
								height: el.retrieve('oHeight') 
							});
						}
						this.fireEvent('load',[el]);
						return false;
					}
					return true;
				},this);
				this.start = cpos;
			}
			this.fireEvent('scroll');
			/* remove this event IF no elements */
			if(!this.elements.length) {
				this.container.removeEvent('scroll',action);
				this.fireEvent('complete');
			}
		}.bind(this);
	
		/* listen for scroll */
		this.container.addEvent('scroll',action);
		if(this.options.fireScroll) { this.container.fireEvent('scroll'); }
	}
});

Hey thomasd, is this the exact code you used for a horizontal scroll that would lazyload? What did you do for the HTML implementation for the images? And why didn't you change the X and Y or vertical to horizontal?

Thanks,
Galen

hey Galen,

this is just the class. You have to call it if you want to use it, for example:

        new LazyLoad({
            'mode':'horizontal'
        });
    });

The X and Y is changing according to the "mode"-option.
Hope that helps.

Greets,
thomasd

Ah, of course, thanks! I really appreciate it! Galen

…

On Mon, Jul 25, 2011 at 9:24 AM, thomasd < ***@***.***>wrote: hey Galen, this is just the class. You have to call if you want to use it, for example: ```window.addEvent('domready', function(){ new LazyLoad({ 'mode':'horizontal' }); }); ``` The X and Y is changing according to the "mode"-option. Hope that helps. Greets, thomasd -- Reply to this email directly or view it on GitHub: https://gist.github.com/255921 ```