Permalink
Browse files

Done?

  • Loading branch information...
1 parent f06c848 commit e324c8265003d35d1c2827eecf9f3b555bebf439 @darkwing darkwing committed Sep 3, 2009
Showing with 156 additions and 0 deletions.
  1. +63 −0 Docs/LazyLoad.md
  2. +23 −0 README.md
  3. +1 −0 Source/LazyLoad-yui-compressed.js
  4. +69 −0 Source/LazyLoad.js
View
@@ -0,0 +1,63 @@
+Class: LazyLoad {#LazyLoad}
+=====================================
+
+LazyLoad allows you to defer image loading until the user scrolls down to each image.
+
+### Implements:
+
+Options, Events
+
+LazyLoad Method: constructor {#LazyLoad:constructor}
+---------------------------------------------------------------
+
+
+### Syntax:
+
+ var myLazyLoad = new LazyLoad(options);
+
+### Arguments:
+
+1. options - (*object*) An object containing the LazyLoad instance's options.
+
+### Options:
+
+* range - (*integer*, defaults to 200) The offset of the container scroll position to the image before the image should load.
+* image - (*string*, defaults to 'blank.gif') The image to replace to the original image.
+* resetDimensions - (*boolean*, defaults to true) Should the LazyLoad instance remove the image's "width" and "height" attributes?
+* elements - (*string*, defaults to 'img') The elements to apply LazyLoad to.
+* container - (*element*, defaults to window) The container of any images for LazyLoad to be applied to.
+
+### Returns:
+
+A LazyLoad instance.
+
+
+### Events:
+
+### load
+
+* (*function*) Function to execute when an image is loaded.
+
+### Signature
+
+ onLoad(image)
+
+#### Arguments:
+
+1. image - (*Element*) The image element which was loaded.
+
+### scroll
+
+* (*function*) Function to execute when the container is scrolled.
+
+### Signature
+
+ onScroll()
+
+### complete
+
+* (*function*) Function to execute when all images have been loaded.
+
+### Signature
+
+ onLoad()
View
@@ -0,0 +1,23 @@
+LazyLoad
+=========
+
+LazyLoad allows you to defer image loading until the user scrolls down to each image.
+
+![Screenshot](http://davidwalsh.name/dw-content/lazyload.png)
+
+
+How to Use
+----------
+
+LazyLoad should be initialized during the DOMReady event. There are no required arguments -- only options.
+
+ #JS
+ /* LazyLoad instance */
+ var lazyloader = new LazyLoad({
+ range: 200,
+ image: 'blank.gif',
+ elements: 'img'
+ });
+
+
+For specific usage and options, please read the documentation or visit [http://davidwalsh.name/js/lazyLoad](http://davidwalsh.name/js/lazyLoad)

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -0,0 +1,69 @@
+(function($) {
+ this.LazyLoad = new Class({
+
+ Implements: [Options,Events],
+
+ /* additional options */
+ options: {
+ range: 200,
+ image: 'blank.gif',
+ resetDimensions: true,
+ elements: 'img',
+ container: window
+ },
+
+ /* initialize */
+ initialize: function(options) {
+
+ /* vars */
+ this.setOptions(options);
+ this.container = $(this.options.container);
+ this.elements = $$(this.options.elements);
+ this.containerHeight = this.container.getSize().y;
+ 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).y > this.containerHeight + 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().y;
+ if(cpos > this.start) {
+ this.elements = this.elements.filter(function(el) {
+ if((this.container.getScroll().y + this.options.range + this.containerHeight) >= el.getPosition(this.container).y) {
+ 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);
+ }
+ });
+})(document.id);

0 comments on commit e324c82

Please sign in to comment.