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

Download Debut Article Example Usage

Plugin Code (Version 2.1)

var LazyLoad = new Class({

	Implements: [Options,Events],

	/* additional options */
	options: {
		range: 200,
		elements: "img",
		container: window,
		mode: "vertical",
		realSrcAttribute: "data-src",
		useFade: true

	/* initialize */
	initialize: function(options) {
		// Set the class options
		// Elementize items passed in
		this.container = document.id(this.options.container);
		this.elements = document.id(this.container == window ? document.body : this.container).getElements(this.options.elements);
		// Set a variable for the "highest" value this has been
		this.largestPosition = 0;
		// Figure out which axis to check out
		var axis = (this.options.mode == "vertical" ? "y": "x");
		// Calculate the offset
		var offset = (this.container != document.body && this.container != document.body ? this.container : "");

		// Find elements remember and hold on to
		this.elements = this.elements.filter(function(el) {
			// Make opacity 0 if fadeIn should be done
			if(this.options.useFade) el.setStyle("opacity", 0);
			// Get the image position
			var elPos = el.getPosition(offset)[axis];
			// If the element position is within range, load it
			if(elPos < this.container.getSize()[axis] + this.options.range) {
				return false;
			return true;
		// Create the action function that will run on each scroll until all images are loaded
		var action = function(e) {
			// Get the current position
			var cpos = this.container.getScroll()[axis];
			// If the current position is higher than the last highest
			if(cpos > this.largestPosition) {
				// Filter elements again
				this.elements = this.elements.filter(function(el) {
					// If the element is within range...
					if((cpos + this.options.range + this.container.getSize()[axis]) >= el.getPosition(offset)[axis]) {
						// Load the image!
						return false;
					return true;
				// Update the "highest" position
				this.largestPosition = cpos;
			// relay the class" scroll event
			// If there are no elements left, remove the action event and fire complete
			if(!this.elements.length) {
				this.container.removeEvent("scroll", action);
		// Add scroll listener
		this.container.addEvent("scroll", action);
	loadImage: function(image) {
		// Set load event for fadeIn
		if(this.options.useFade) {
			image.addEvent("load", function(){
		// Set the SRC
		image.set("src", image.get(this.options.realSrcAttribute));
		// Fire the image load event
		this.fireEvent("load", [image]);

/* 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