Skip to content
Browse files

Updated LazyLoad to allow for horizontal or vertical modes

  • Loading branch information...
1 parent cb498bc commit 61dd9059d91a89f35e1ecad1f9c29d892101320a @darkwing committed Dec 14, 2009
Showing with 9 additions and 6 deletions.
  1. +1 −0 Docs/LazyLoad.md
  2. +7 −5 Source/LazyLoad.js
  3. +1 −1 package.yml
View
1 Docs/LazyLoad.md
@@ -26,6 +26,7 @@ LazyLoad Method: constructor {#LazyLoad:constructor}
* 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.
+* mode - (*string*, defaults to 'vertical') The scroll mode ('vertical' or 'horizontal').
### Returns:
View
12 Source/LazyLoad.js
@@ -26,7 +26,8 @@ var LazyLoad = new Class({
resetDimensions: true,
elements: 'img',
container: window,
- fireScroll: true
+ fireScroll: true,
+ mode: 'vertical'
},
/* initialize */
@@ -36,13 +37,14 @@ var LazyLoad = new Class({
this.setOptions(options);
this.container = document.id(this.options.container);
this.elements = $$(this.options.elements);
- this.containerHeight = this.container.getSize().y;
+ 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).y > this.containerHeight + this.options.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':''});
@@ -53,10 +55,10 @@ var LazyLoad = new Class({
/* create the action function */
var action = function() {
- var cpos = this.container.getScroll().y;
+ var cpos = this.container.getScroll()[axis];
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((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({
View
2 package.yml
@@ -1,6 +1,6 @@
name: LazyLoad
author: davidwalsh
-current: 1.1
+current: 1.2
category: Media
tags: [lazyload,images,media,load]
docs: http://davidwalsh.name/js/lazyload

0 comments on commit 61dd905

Please sign in to comment.
Something went wrong with that request. Please try again.