├── Assets └── blank.gif ├── Docs └── LazyLoad.md ├── README.md ├── Source └── LazyLoad.js └── package.yml /Assets/blank.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/darkwing/LazyLoad/c6c3dadfae5a194957095aaf57d0cd05e347e8e2/Assets/blank.gif -------------------------------------------------------------------------------- /Docs/LazyLoad.md: -------------------------------------------------------------------------------- 1 | Class: LazyLoad {#LazyLoad} 2 | ===================================== 3 | 4 | LazyLoad allows you to defer image loading until the user scrolls down to each image. 5 | 6 | ### Implements: 7 | 8 | Options, Events 9 | 10 | LazyLoad Method: constructor {#LazyLoad:constructor} 11 | --------------------------------------------------------------- 12 | 13 | 14 | ### Syntax: 15 | 16 | var myLazyLoad = new LazyLoad(options); 17 | 18 | ### Arguments: 19 | 20 | 1. options - (*object*) An object containing the LazyLoad instance's options. 21 | 22 | ### Options: 23 | 24 | * range - (*integer*, defaults to 200) The offset of the container scroll position to the image before the image should load. 25 | * image - (*string*, defaults to 'blank.gif') The image to replace to the original image. 26 | * resetDimensions - (*boolean*, defaults to true) Should the LazyLoad instance remove the image's "width" and "height" attributes? 27 | * elements - (*string*, defaults to 'img') The elements to apply LazyLoad to. 28 | * container - (*element*, defaults to window) The container of any images for LazyLoad to be applied to. 29 | * mode - (*string*, defaults to 'vertical') The scroll mode ('vertical' or 'horizontal'). 30 | * useFade - (*boolean*, defaults to true) Notes if images should fade in when loaded 31 | 32 | ### Returns: 33 | 34 | A LazyLoad instance. 35 | 36 | 37 | ### Events: 38 | 39 | ### load 40 | 41 | * (*function*) Function to execute when an image is loaded. 42 | 43 | ### Signature 44 | 45 | onLoad(image) 46 | 47 | #### Arguments: 48 | 49 | 1. image - (*Element*) The image element which was loaded. 50 | 51 | ### scroll 52 | 53 | * (*function*) Function to execute when the container is scrolled. 54 | 55 | ### Signature 56 | 57 | onScroll() 58 | 59 | ### complete 60 | 61 | * (*function*) Function to execute when all images have been loaded. 62 | 63 | ### Signature 64 | 65 | onLoad() -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | LazyLoad 2 | ========= 3 | 4 | LazyLoad allows you to defer image loading until the user scrolls down to each image. Using LazyLoad can easily save you bandwidth and allow the page to load faster for the user. This plugin takes only a minute to implement so using LazyLoad is a must. 5 | 6 | ![Screenshot](http://davidwalsh.name/dw-content/lazyload.png) 7 | 8 | 9 | How to Use 10 | ---------- 11 | 12 | LazyLoad should be initialized during the DOMReady event. There are no required arguments -- only options. 13 | 14 | #JS 15 | /* LazyLoad instance */ 16 | var lazyloader = new LazyLoad({ 17 | range: 200, 18 | realSrcAttribute: "data-src", 19 | useFade: true, 20 | elements: 'img', 21 | container: window 22 | }); 23 | 24 | #HTML 25 | 26 | 27 | 28 | 29 | 30 | For specific usage and options, please read the documentation or visit [http://davidwalsh.name/js/lazyload](http://davidwalsh.name/js/lazyLoad) -------------------------------------------------------------------------------- /Source/LazyLoad.js: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | description: LazyLoad 4 | 5 | authors: 6 | - David Walsh (http://davidwalsh.name) 7 | 8 | license: 9 | - MIT-style license 10 | 11 | requires: 12 | core/1.2.1: "*" 13 | 14 | provides: 15 | - LazyLoad 16 | ... 17 | */ 18 | var LazyLoad = new Class({ 19 | 20 | Implements: [Options,Events], 21 | 22 | /* additional options */ 23 | options: { 24 | range: 200, 25 | elements: "img", 26 | container: window, 27 | mode: "vertical", 28 | realSrcAttribute: "data-src", 29 | useFade: true 30 | }, 31 | 32 | /* initialize */ 33 | initialize: function(options) { 34 | 35 | // Set the class options 36 | this.setOptions(options); 37 | 38 | // Elementize items passed in 39 | this.container = document.id(this.options.container); 40 | this.elements = document.id(this.container == window ? document.body : this.container).getElements(this.options.elements); 41 | 42 | // Set a variable for the "highest" value this has been 43 | this.largestPosition = 0; 44 | 45 | // Figure out which axis to check out 46 | var axis = (this.options.mode == "vertical" ? "y": "x"); 47 | 48 | // Calculate the offset 49 | var offset = (this.container != window && this.container != document.body ? this.container : ""); 50 | 51 | // Find elements remember and hold on to 52 | this.elements = this.elements.filter(function(el) { 53 | // Make opacity 0 if fadeIn should be done 54 | if(this.options.useFade) el.setStyle("opacity", 0); 55 | // Get the image position 56 | var elPos = el.getPosition(offset)[axis]; 57 | // If the element position is within range, load it 58 | if(elPos < this.container.getSize()[axis] + this.options.range) { 59 | this.loadImage(el); 60 | return false; 61 | } 62 | return true; 63 | },this); 64 | 65 | // Create the action function that will run on each scroll until all images are loaded 66 | var action = function(e) { 67 | 68 | // Get the current position 69 | var cpos = this.container.getScroll()[axis]; 70 | 71 | // If the current position is higher than the last highest 72 | if(cpos > this.largestPosition) { 73 | 74 | // Filter elements again 75 | this.elements = this.elements.filter(function(el) { 76 | 77 | // If the element is within range... 78 | if((cpos + this.options.range + this.container.getSize()[axis]) >= el.getPosition(offset)[axis]) { 79 | 80 | // Load the image! 81 | this.loadImage(el); 82 | return false; 83 | } 84 | return true; 85 | 86 | },this); 87 | 88 | // Update the "highest" position 89 | this.largestPosition = cpos; 90 | } 91 | 92 | // relay the class" scroll event 93 | this.fireEvent("scroll"); 94 | 95 | // If there are no elements left, remove the action event and fire complete 96 | if(!this.elements.length) { 97 | this.container.removeEvent("scroll", action); 98 | this.fireEvent("complete"); 99 | } 100 | 101 | }.bind(this); 102 | 103 | // Add scroll listener 104 | this.container.addEvent("scroll", action); 105 | }, 106 | loadImage: function(image) { 107 | // Set load event for fadeIn 108 | if(this.options.useFade) { 109 | image.addEvent("load", function(){ 110 | image.fade(1); 111 | }); 112 | } 113 | // Set the SRC 114 | image.set("src", image.get(this.options.realSrcAttribute)); 115 | // Fire the image load event 116 | this.fireEvent("load", [image]); 117 | } 118 | }); -------------------------------------------------------------------------------- /package.yml: -------------------------------------------------------------------------------- 1 | name: LazyLoad 2 | author: davidwalsh 3 | current: 2.2 4 | category: Media 5 | tags: [lazyload,images,media,load] 6 | docs: http://davidwalsh.name/js/lazyload 7 | demo: http://davidwalsh.name/js/lazyload 8 | --------------------------------------------------------------------------------