diff --git a/README.md b/README.md index 0c54be3..6364391 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ How to Use LazyLoad should be initialized during the DOMReady event. There are no required arguments -- only options. - #JS + # JS With Load Trigger on Scroll /* LazyLoad instance */ var lazyloader = new LazyLoad({ range: 200, @@ -21,6 +21,15 @@ LazyLoad should be initialized during the DOMReady event. There are no required container: window }); + # JS With Manual Load Trigger + var lazyLoader = new LazyLoad({ + container: window, + elements: 'img', + useScrollLoad: false + }); + + lazyLoader.manualLoad() + #HTML diff --git a/Source/LazyLoad.js b/Source/LazyLoad.js index cbde588..816c9f0 100644 --- a/Source/LazyLoad.js +++ b/Source/LazyLoad.js @@ -26,7 +26,8 @@ var LazyLoad = new Class({ container: window, mode: "vertical", realSrcAttribute: "data-src", - useFade: true + useFade: true, + useScrollLoad: true }, /* initialize */ @@ -39,9 +40,25 @@ var LazyLoad = new Class({ 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; - + if(this.options.useScrollLoad) { + // Set a variable for the "highest" value this has been + this.largestPosition = 0; + + this.scrollLoad(); + } else { + if(this.options.useFade) { + this.elements.each(function(el) { + el.setStyle('opacity', 0); + }); + } + } + }, + manualLoad: function() { + this.elements.each(function(img) { + this.loadImage(img); + }, this); + }, + scrollLoad: function() { // Figure out which axis to check out var axis = (this.options.mode == "vertical" ? "y": "x"); @@ -101,7 +118,7 @@ var LazyLoad = new Class({ }.bind(this); // Add scroll listener - this.container.addEvent("scroll", action); + this.container.addEvent("scroll", action); }, loadImage: function(image) { // Set load event for fadeIn