├── CHANGELOG.md ├── css ├── eskju.jquery.lazyloading.css └── examples.css ├── LICENSE ├── js ├── eskju.jquery.lazyloading.min.js └── eskju.jquery.lazyloading.js └── README.md /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## Version 1.0.0 4 | 5 | + Basic plugin 6 | 7 | ## Version 1.0.1 8 | 9 | + Events `nextPageRequested` and `nextPageLoaded` added 10 | -------------------------------------------------------------------------------- /css/eskju.jquery.lazyloading.css: -------------------------------------------------------------------------------- 1 | 2 | .esKju-lazyloading 3 | { 4 | opacity: 0; 5 | -webkit-transition: all 200ms ease-in-out; 6 | -moz-transition: all 200ms ease-in-out; 7 | -o-transition: all 200ms ease-in-out; 8 | -ms-transition: all 200ms ease-in-out; 9 | overflow: hidden; 10 | -webkit-transform: scale( 1.05 ) translateY( 100px ) skewY( 3deg ); 11 | } 12 | 13 | .esKju-lazyloading-loaded 14 | { 15 | opacity: 1; 16 | -webkit-transform: scale( 1 ) translateY( 0px ); 17 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Christian Witte 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /css/examples.css: -------------------------------------------------------------------------------- 1 | 2 | #example1, 3 | #example2, 4 | #example3, 5 | #example4 6 | { 7 | min-height: 900px; 8 | margin-bottom: 100px; 9 | background-color: #f5f5f5; 10 | padding: 50px; 11 | border-radius: 5px; 12 | } 13 | 14 | #example1 .esKju-lazyloading.esKju-lazyloading-loaded, 15 | #example2 .esKju-lazyloading.esKju-lazyloading-loaded, 16 | #example3 .esKju-lazyloading.esKju-lazyloading-loaded, 17 | #example4 .esKju-lazyloading.esKju-lazyloading-loaded 18 | { 19 | opacity: 1; 20 | -webkit-transform: none; 21 | -moz-transform: none; 22 | -o-transform: none; 23 | -ms-transform: none; 24 | -webkit-filter: blur( 0px ); 25 | -moz-filter: blur( 0px ); 26 | -o-filter: blur( 0px ); 27 | -ms-filter: blur( 0px ); 28 | } 29 | 30 | #example1 .esKju-lazyloading 31 | { 32 | opacity: 0; 33 | -webkit-transition: all 500ms ease-in-out; 34 | -moz-transition: all 500ms ease-in-out; 35 | -o-transition: all 500ms ease-in-out; 36 | -ms-transition: all 500ms ease-in-out; 37 | overflow: hidden; 38 | -webkit-transform: scale( 1.25 ) translateY( 100px ) skewX( 15deg ); 39 | -moz-transform: scale( 1.25 ) translateY( 100px ) skewX( 15deg ); 40 | -o-transform: scale( 1.25 ) translateY( 100px ) skewX( 15deg ); 41 | -ms-transform: scale( 1.25 ) translateY( 100px ) skewX( 15deg ); 42 | } 43 | 44 | #example2 .esKju-lazyloading 45 | { 46 | opacity: 0; 47 | -webkit-transition: all 1500ms ease-in-out; 48 | -moz-transition: all 1500ms ease-in-out; 49 | -o-transition: all 1500ms ease-in-out; 50 | -ms-transition: all 1500ms ease-in-out; 51 | overflow: hidden; 52 | -webkit-filter: blur( 10px ); 53 | -moz-filter: blur( 10px ); 54 | -o-filter: blur( 10px ); 55 | -ms-filter: blur( 10px ); 56 | -webkit-transform: translate3d(0, 0, 0); 57 | } 58 | 59 | #example3 .esKju-lazyloading 60 | { 61 | opacity: 0; 62 | -webkit-transition: all 2000ms ease-in-out; 63 | -moz-transition: all 2000ms ease-in-out; 64 | -o-transition: all 2000ms ease-in-out; 65 | -ms-transition: all 2000ms ease-in-out; 66 | overflow: hidden; 67 | -webkit-transform: rotateX( 70deg) translateX( 100px ); 68 | -moz-transform: rotateX( 70deg) translateX( 100px ); 69 | -o-transform: rotateX( 70deg) translateX( 100px ); 70 | -ms-transform: rotateX( 70deg) translateX( 100px ); 71 | } 72 | 73 | #example4 .esKju-lazyloading 74 | { 75 | 76 | } 77 | -------------------------------------------------------------------------------- /js/eskju.jquery.lazyloading.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery lazyLoading plugin 3 | * 4 | * Copyright (c) 2014 Christian Witte 5 | * licensed under MIT license. 6 | * 7 | * https://github.com/eskju/eskju-jquery-lazyloading 8 | * 9 | * Version: 1.0.1 10 | * 11 | * Licensed under MIT license. 12 | * Permission is hereby granted, free of charge, to any person obtaining a copy of this software 13 | * and associated documentation files (the "Software"), to deal in the Software without restriction, 14 | * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, 15 | * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, 16 | * subject to the following conditions: 17 | * The above copyright notice and this permission notice shall be included in all copies or substantial 18 | * portions of the Software. 19 | * 20 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT 21 | * LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 22 | * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 23 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 24 | * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 25 | */ 26 | 27 | esKjuLazyLoading=function(a){this.init(a)},$.extend(esKjuLazyLoading.prototype,{init:function(a){this.container=$(a.container),this.offset=this.container.offset(),this.loading=!1,this.url=this.container.attr("data-request"),this.options=$.extend({tolerance:200,classLoading:"esKju-lazyloading",classLoaded:"esKju-lazyloading-loaded",pageAlias:"page",page:1,maxPages:!1,lazyImagePlugin:{enable:!0,classLoading:"esKju-lazyimage"}},a),this.bindScroll()},loadNextPage:function(){var a=this;$(this.container).trigger("nextPageRequested"),$.get(this.url,{ajax:1,page:a.options.page},function(n){a.container.append(n),a.container.addClass(a.options.classLoaded),a.options.lazyImagePlugin.enable&&("undefined"==typeof LazyImage?console.debug("LazyImage plugin is not loaded"):new LazyImage(a.container.find("."+a.options.lazyImagePlugin.classLoading))),a.container.find("."+a.options.classLoading).length>0&&(!a.options.maxPages||a.options.maxPages>a.options.page)&&new esKjuLazyLoading({container:a.container.find("."+a.options.classLoading),page:a.options.page+1,maxPages:a.options.maxPages}),$(a.container).trigger("nextPageLoaded")})},bindScroll:function(){var a=this;a.update(),$(window).scroll(function(){a.update()}),$(window).resize(function(){a.update()})},update:function(){var a=this;this.offset=this.container.offset(),!a.loading&&$(window).scrollTop()+$(window).height()-a.options.tolerance>a.offset.top&&(a.loading=!0,a.loadNextPage())}}); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # esKju's jQuery lazyLoading Plugin 2 | 3 | ## What is it? 4 | 5 | EsKju's LazyLoading is a tool for loading content just in time in a Facebook-similar style. 6 | It was built using the jQuery library. Licensed under MIT and GPL licenses. 7 | 8 | ## Features 9 | 10 | + Supersedes dowdy paginations 11 | + Customizable trough settings and CSS 12 | + Highly compatible 13 | + Uses CSS3 transitions by default 14 | 15 | ## How to use 16 | 17 | ### 1. doctype 18 | 19 | Make sure you are using valid DOCTYPE. This is required for LazyLoading to look and function correctly. 20 | 21 | ``` 22 | 23 | ``` 24 | 25 | ### 2. include files 26 | 27 | Loading jQuery from CDN (Content Delivery Network) is recommended. 28 | Include all lazyLoading JavaScript and CSS files in addition. 29 | 30 | ``` 31 | 32 | 33 | 34 | ``` 35 | 36 | ### 3. html markup 37 | 38 | ``` 39 | Create a HTML container. 40 |
41 |
42 | 43 |
44 |
45 | ``` 46 | 47 | ###4. fire plugin using jquery selector 48 | 49 | If you are not familiar with jQuery, please, read this tutorial for beginners. 50 | Sample examples: 51 | 52 | ``` 53 | $( document ).ready( function( ) 54 | { 55 | options = { 56 | container: $( "#example1 .esKju-lazyloading" ), 57 | maxPages: 3 58 | }; 59 | 60 | new esKjuLazyLoading( options ); 61 | } ); 62 | ``` 63 | 64 | ### 5. customize your styles 65 | 66 | To create your own fresh look, customize the stylesheet file. 67 | Sample examples: 68 | 69 | ``` 70 | #example1 .esKju-lazyloading 71 | { 72 | opacity: 0; 73 | -webkit-transition: all 200ms ease-in-out; 74 | -moz-transition: all 200ms ease-in-out; 75 | -o-transition: all 200ms ease-in-out; 76 | -ms-transition: all 200ms ease-in-out; 77 | overflow: hidden; 78 | -webkit-transform: scale( 1.05 ) translateY( 100px ) skewY( 3deg ); 79 | -moz-transform: scale( 1.05 ) translateY( 100px ) skewY( 3deg ); 80 | -o-transform: scale( 1.05 ) translateY( 100px ) skewY( 3deg ); 81 | -ms-transform: scale( 1.05 ) translateY( 100px ) skewY( 3deg ); 82 | } 83 | 84 | #example1 .esKju-lazyloading-loaded 85 | { 86 | opacity: 1; 87 | -webkit-transform: scale( 1 ) translateY( 0px ) skewY( 0deg ); 88 | -moz-transform: scale( 1 ) translateY( 0px ) skewY( 0deg ); 89 | -o-transform: scale( 1 ) translateY( 0px ) skewY( 0deg ); 90 | -ms-transform: scale( 1 ) translateY( 0px ) skewY( 0deg ); 91 | } 92 | ``` 93 | 94 | ## Author & Help 95 | 96 | For more information visit the author's page: 97 | 98 | + esKju's Playground 99 | + esKju's LazyLoading Project Page 100 | -------------------------------------------------------------------------------- /js/eskju.jquery.lazyloading.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery lazyLoading plugin 3 | * 4 | * Copyright (c) 2014 Christian Witte 5 | * licensed under MIT license. 6 | * 7 | * https://github.com/eskju/eskju-jquery-lazyloading 8 | * 9 | * Version: 1.0.1 10 | * 11 | * Licensed under MIT license. 12 | * Permission is hereby granted, free of charge, to any person obtaining a copy of this software 13 | * and associated documentation files (the "Software"), to deal in the Software without restriction, 14 | * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, 15 | * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, 16 | * subject to the following conditions: 17 | * The above copyright notice and this permission notice shall be included in all copies or substantial 18 | * portions of the Software. 19 | * 20 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT 21 | * LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 22 | * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 23 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 24 | * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 25 | */ 26 | 27 | esKjuLazyLoading = function( options ) 28 | { 29 | this.init( options ); 30 | } 31 | 32 | 33 | $.extend( esKjuLazyLoading.prototype, 34 | { 35 | init : function( options ) 36 | { 37 | this.container = $( options.container ); 38 | this.offset = this.container.offset( ); 39 | this.loading = false; 40 | this.url = this.container.attr( "data-request" ); 41 | 42 | this.options = $.extend( 43 | { 44 | tolerance : 200, 45 | classLoading : "esKju-lazyloading", 46 | classLoaded : "esKju-lazyloading-loaded", 47 | pageAlias : "page", 48 | page: 1, 49 | maxPages: false, 50 | lazyImagePlugin : 51 | { 52 | enable : true, 53 | classLoading : "esKju-lazyimage", 54 | } 55 | }, options ); 56 | 57 | this.bindScroll( ); 58 | }, 59 | 60 | loadNextPage : function( ) 61 | { 62 | var $this = this; 63 | 64 | $( this.container ).trigger( "nextPageRequested" ); 65 | 66 | $.get( this.url, 67 | { 68 | ajax : 1, 69 | page : $this.options.page 70 | }, function( response ) 71 | { 72 | $this.container.append( response ); 73 | $this.container.addClass( $this.options.classLoaded ); 74 | 75 | if( $this.options.lazyImagePlugin.enable ) 76 | { 77 | if( typeof( LazyImage ) === "undefined" ) 78 | { 79 | console.debug( "LazyImage plugin is not loaded" ); 80 | } 81 | else 82 | { 83 | new LazyImage( $this.container.find( "." + $this.options.lazyImagePlugin.classLoading ) ); 84 | } 85 | } 86 | 87 | if( $this.container.find( "." + $this.options.classLoading ).length > 0 ) 88 | { 89 | if( !$this.options.maxPages || $this.options.maxPages > $this.options.page ) 90 | { 91 | new esKjuLazyLoading( 92 | { 93 | container : $this.container.find( "." + $this.options.classLoading ), 94 | page : $this.options.page + 1, 95 | maxPages : $this.options.maxPages 96 | } ); 97 | } 98 | } 99 | 100 | $( $this.container ).trigger( "nextPageLoaded" ); 101 | } ); 102 | }, 103 | 104 | bindScroll : function( ) 105 | { 106 | var $this = this; 107 | 108 | $this.update( ); 109 | 110 | $( window ).scroll( function( ) 111 | { 112 | $this.update( ); 113 | } ); 114 | 115 | $( window ).resize( function( ) 116 | { 117 | $this.update( ); 118 | } ); 119 | }, 120 | 121 | update : function( ) 122 | { 123 | var $this = this; 124 | this.offset = this.container.offset( ); 125 | 126 | if( !$this.loading && $( window ).scrollTop( ) + $( window ).height( ) - $this.options.tolerance > $this.offset.top ) 127 | { 128 | $this.loading = true; 129 | $this.loadNextPage( ); 130 | } 131 | } 132 | 133 | 134 | } ); 135 | --------------------------------------------------------------------------------