LazyLoad

LazyLoad is a plugin that allows you to defer image loading until the image is scrolled to.

Download Debut Article Example Usagehttp://davidwalsh.name/wp-admin/page.php?action=edit&post=3414#post_name

Plugin Code (Version 1.0)

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'
	},

	/* 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.containerDimension = 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.containerDimension + 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.containerDimension) >= 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'); }
	}
});

/* usage */
window.addEvent('domready',function() {
	var lazyloader = new LazyLoad();
});

Options and Events

Options for LazyLoad include:

  • range: (defaults to 200) The amount of space from the container’s bottom position that you want to look for images to load.
  • image: (defaults to “blank.gif”) The image to replace the original image.
  • resetDimensions: (defaults to true) Removes the image’s width and height attributes.
  • elements: (defaults to “img”) Images to consider for lazy loading.
  • container: (defaults to window) The container for which to look for images within.
  • mode: (defaults to “vertical”) The mode for which the plugin will adjust to.

Events for LazyLoad include:

  • Complete: Fires when all images have been loaded.
  • Load: Fires on each individual image once it has been loaded.
  • Scroll: Fires when the container is scrolled.

Code Revisions & Bug Fixes

None.

Epic Discussion

Commenter Avatar November 07 / #
Boris says:

Hey David, I am using your Side Scroll plugin, and I was wondering what I need to change for this to work with scrolling sideways. Thanks for your help :)

Commenter Avatar December 14 / #
thomasd says:

@Boris: I needed the same behaviour as you and implemented it: http://gist.github.com/255921

Commenter Avatar December 14 / #
Boris says:

@thomasd: I edited the original and switched the ‘Y’ with ‘X’ and it seems to work. Besides the ability to switch between modes did you do the same thing?

Commenter Avatar December 23 / #
thomasd says:

Yes making an option for switching from ‘x’ to ‘y’ was all that was needed.

Be Heard!

I want to hear what you have to say! Share your comments and questions below.

Name*:
Email*:
Website:  


© David Walsh 2007-2010. Contact David Walsh. Powered by the remarkable MooTools javascript framework.