forked from sebarmeli/JAIL
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1,717 changed files
with
198,368 additions
and
9,311 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,3 @@ | ||
| archive | ||
| archive | ||
| node_module | ||
| _SpecRunner.html |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| language: node_js |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,174 +1,179 @@ | ||
| # Jquery Asynchronous Image Loader (JAIL) | ||
|
|
||
| JAIL helps loading images asynchronously and it can be used to make your page load faster. | ||
| JAIL is a jQuery plugin that lazy load images making your page load faster. | ||
|
|
||
| Selected images will be downloaded if they are visible and when they are visible inside the viewport (rectangular viewing region). Images can be loaded after an event is triggered (such as `click`, `mouseover`, and `scroll`) or after a specified delay. It's advisable to call jail() after the DOM has been constructed (document ready). | ||
| Images are downloaded when they are visible or when they become visible inside the viewport (area you see in your browser). Images can be loaded after an event is triggered (such as `click`, `mouseover`, and `scroll`) or after a specified delay. It's advisable to call jail() after the DOM has been constructed (document ready). | ||
|
|
||
| First of all, this plugin requires you to make some HTML changes. The `data-src` ('data-href' prior version 0.9.8) attribute (HTML5 data attribute) should contain the location of the image, instead the `src` attribute should contain a placeholder such as a really tiny image (E.g. 1 px x 1 px). Also, I would suggest to add a `noscript` block so that in case the user doesn't have Javascript enabled, the images will be displayed (progressive enhancement). | ||
| ## Getting Started | ||
|
|
||
| <pre> | ||
| <code> | ||
| <img class="lazy" src="/img/blank.gif" data-src="/img/image1.jpg" > | ||
| <noscript> | ||
| <img src="/img/image1.jpg" > | ||
| <noscript> | ||
| </code> | ||
| </pre> | ||
| First of all, this plugin requires you to make some HTML changes. The `data-src` attribute (HTML5 data attribute) should contain the location of the image, instead the `src` attribute should contain a placeholder such as a really tiny image (E.g. 1 px x 1 px). Also, I would suggest to add a `noscript` block so that in case the user doesn't have Javascript enabled, the images will be displayed (progressive enhancement). | ||
|
|
||
| In a basic scenario, you just need to import `jquery`, `jail.js` and call the function on the images you want to lazy load. | ||
| ```html | ||
| <img class="lazy" src="/img/blank.gif" data-src="/img/image1.jpg"/> | ||
| <noscript> | ||
| <img src="/img/image1.jpg"/> | ||
| <noscript> | ||
| ``` | ||
|
|
||
| <pre> | ||
| <code> | ||
| <script src="/js/jquery.js"></script> | ||
| <script src="/js/jail.js"></script> | ||
| <script> | ||
| $(function(){ | ||
| $('img.lazy').jail(); | ||
| }); | ||
| </script> | ||
| </code> | ||
| </pre> | ||
| In a basic scenario, you just need to import `jquery`, `jail.js` and call the jail() function on the images you want to lazy load. | ||
|
|
||
| You will verify how only the visible images are loaded after the DOM is ready. As soon other images become available in the viewport (for instance scrolling down), they are lazy loaded. | ||
| ```html | ||
| <script src="/lib/jquery.js"></script> | ||
| <script src="/src/jail.js"></script> | ||
| <script> | ||
| $(function(){ | ||
| $('img.lazy').jail(); | ||
| }); | ||
| </script> | ||
| ``` | ||
|
|
||
| The images in the viewport are loaded straight away after the DOM is ready. As soon other images become visible in the viewport (for instance after the user scrolls down), they are lazy loaded. | ||
|
|
||
| ## Config | ||
| You can add additional configuration options when you initially call jail(): | ||
|
|
||
| * `timeout` : number of msec after that the images will be loaded - Default: `10` | ||
| * `effect` : any jQuery effect that makes the images display (e.g. "fadeIn") - Default: `NULL` | ||
| - `timeout` : number of msec after that the images will be loaded - Default: `10` | ||
| - `effect` : any jQuery effect that makes the images display (e.g. "fadeIn") - Default: `NULL` | ||
|
|
||
| **NOTE:** If you are loading a large number of images, it is best to NOT use this setting. Effects calls are very expensive. Even a simple `show()` can have a major impact on the browser's responsiveness. | ||
| **NOTE:** If you are loading a large number of images, it is best NOT to use this setting. | ||
|
|
||
| * `speed` : string or number determining how long the animation will run - Default: 400 | ||
| * `triggerElement` : selector that you need to bind the trigger event - Default: `NULL` | ||
| * `event` : event : event that triggers the image to load. You can choose among `load`, `click`, `mouseover`, 'scroll', etc. Default: `load` | ||
| * `callback` : function that will be called after all the images are loaded - Default: "" | ||
| * `callbackAfterEachImage` : function that will be called after each image is loaded - Default: "" | ||
| * `placeholder` : location of an image (such a loader) you want to display while waiting for the images to be loaded - Default: "" | ||
| * `offset` : an offset of "500" would cause any images that are less than 500px below the bottom of the window or 500px above the top of the window to load. - Default: 0 | ||
| * `loadHiddenImages` : boolean to load hidden images - Default: false (so hidden images are not loaded) | ||
| - `speed` : string or number determining how long the animation will run - Default: 400 | ||
| - `triggerElement` : selector that triggers the images to be loaded - Default: `NULL` | ||
| - `event` : event : event that triggers the image to be loaded. You can choose among `load`, `click`, `mouseover`, 'scroll', etc. Default: `load` | ||
| - `callback` : function that will be called after all the images are loaded - Default: "" | ||
| - `callbackAfterEachImage` : function that will be called after each image is loaded - Default: "" | ||
| - `placeholder` : location of an image (such a loader) you want to display while waiting for the images to be loaded - Default: "" | ||
| - `offset` : an offset of "500" would cause any images that are less than 500px below the bottom of the window or 500px above the top of the window to load. - Default: 0 | ||
| - `loadHiddenImages` : boolean to load hidden images - Default: false (so hidden images are not loaded) | ||
|
|
||
| ## Examples | ||
| ## How to invoke jail() | ||
|
|
||
| Here are some examples in order to have a better understanding of how the plugin works | ||
| Here are some examples on how to invoke jail() in order to have a better understanding of how the plugin works | ||
|
|
||
| ### Load images after clicking on anchor with id 'link'. The images will fade in with speed 500. Placeholder specified. | ||
|
|
||
| <pre> | ||
| <code> | ||
| <script> | ||
| $(function(){ | ||
| $('img.lazy').jail({ | ||
| triggerElement:'a#link', | ||
| event: 'click', | ||
| effect: 'fadeIn', | ||
| speed : 500, | ||
| placeholder : 'img/loader.gif', | ||
| callback : SA.setActive | ||
| }); | ||
| }); | ||
| </script> | ||
| </code> | ||
| </pre> | ||
|
|
||
|
|
||
| ### Initially load the visible images within `#my_container`. Then, as `#my_container` is scrolled (let's say it has scrolling bars), load the images that become visible | ||
|
|
||
| <pre> | ||
| <code> | ||
| <script> | ||
| $(function(){ | ||
| $('img.lazy').jail({ | ||
| triggerElement:'#my_container', | ||
| event: 'scroll' | ||
| }); | ||
| }); | ||
| </script> | ||
| </code> | ||
| </pre> | ||
| ```javascript | ||
| $(function(){ | ||
| $('img.lazy').jail({ | ||
| triggerElement:'a#link', | ||
| event: 'click', | ||
| effect: 'fadeIn', | ||
| speed : 500, | ||
| placeholder : 'img/loader.gif', | ||
| callback : SA.setActive | ||
| }); | ||
| }); | ||
| ``` | ||
|
|
||
| ### Initially load the visible images within `#my_container`. Then, as you scroll inside `#my_container`, images become visible | ||
|
|
||
| ```javascript | ||
| $(function(){ | ||
| $('img.lazy').jail({ | ||
| triggerElement:'#my_container', | ||
| event: 'scroll' | ||
| }); | ||
| }); | ||
| ``` | ||
|
|
||
| ### After 1 second the hidden images are loaded | ||
|
|
||
| <pre> | ||
| <code> | ||
| <script> | ||
| $(function(){ | ||
| $('img.lazy').jail({ | ||
| timeout : 1000 | ||
| }); | ||
| }); | ||
| </script> | ||
| </code> | ||
| </pre> | ||
| ```javascript | ||
| $(function(){ | ||
| $('img.lazy').jail({ | ||
| timeout : 1000 | ||
| }); | ||
| }); | ||
| ``` | ||
|
|
||
| ### Load images after mouse-overing on the placeholder for the image | ||
|
|
||
| <pre> | ||
| <code> | ||
| <script> | ||
| $(function(){ | ||
| $('img.lazy').jail({ | ||
| event: 'mouseover', | ||
| placeholder : 'img/loader.gif' | ||
| }); | ||
| }); | ||
| </script> | ||
| </code> | ||
| </pre> | ||
|
|
||
| ### Load the images that are up to 300px below the window or up the window | ||
|
|
||
| <pre> | ||
| <code> | ||
| <script> | ||
| $(function(){ | ||
| $('img.lazy').jail({ | ||
| offset : 300 | ||
| }); | ||
| }); | ||
| </script> | ||
| </code> | ||
| </pre> | ||
| ```javascript | ||
| $(function(){ | ||
| $('img.lazy').jail({ | ||
| event: 'mouseover', | ||
| placeholder : 'img/loader.gif' | ||
| }); | ||
| }); | ||
| ``` | ||
|
|
||
| ### Load the images that are up to 300px over/below theviewport | ||
|
|
||
| ```javascript | ||
| $(function(){ | ||
| $('img.lazy').jail({ | ||
| offset : 300 | ||
| }); | ||
| }); | ||
| ``` | ||
|
|
||
| ### Alert saying "all the images are loaded" is called after all the images are loaded, alert saying "one image is loaded" after one image is loaded | ||
|
|
||
| <pre> | ||
| <code> | ||
| <script> | ||
| $(function(){ | ||
| $('img.lazy').jail({ | ||
| callback : (function(){alert("All the images are loaded");}), | ||
| callbackAfterEachImage : function() {alert("one image is loaded");} | ||
| }); | ||
| }); | ||
| </script> | ||
| </code> | ||
| </pre> | ||
| ```javascript | ||
| $(function(){ | ||
| $('img.lazy').jail({ | ||
| callback : (function(){alert("All the images are loaded");}), | ||
| callbackAfterEachImage : function() {alert("one image is loaded");} | ||
| }); | ||
| }); | ||
| ``` | ||
|
|
||
| ### Ignore hidden images to be loaded (images with or under a "display:none" or with hidden "visibility" or not visible inside a "overflow:hidden" element) | ||
| <pre> | ||
| <code> | ||
| <script> | ||
| $(function(){ | ||
| $('img.lazy').jail({ | ||
| loadHiddenImages : true | ||
| }); | ||
| }); | ||
| </script> | ||
| </code> | ||
| </pre> | ||
|
|
||
| ## Tests | ||
| ```javascript | ||
| $(function(){ | ||
| $('img.lazy').jail({ | ||
| loadHiddenImages : true | ||
| }); | ||
| }); | ||
| ``` | ||
|
|
||
| You can run tests by pointing your web browser at `[location of JAIL]/test/test.html` | ||
| ## Demo | ||
|
|
||
| ## AMD | ||
| You can view a few demo examples usign JAIL [here](https://github.com/sebarmeli/JAIL/tree/master/demo) | ||
|
|
||
| Plugin supports AMD through define() method. You can call the plugin using RequireJS for example, see 'example14' and 'example15' in the 'demo' folder. | ||
| ## AMD support | ||
|
|
||
| ## package.json | ||
| Plugin supports AMD through define() method. If you use RequireJS (version > 2.0), you can require the plugin as follows: | ||
|
|
||
| Json file defining the plugin that will be used by plugins.jquery.com | ||
| ```javascript | ||
| requirejs.config({ | ||
| baseUrl: 'lib', | ||
| paths: { | ||
| app: 'src' | ||
| }, | ||
| shim: { | ||
| 'app/jail': ['jquery'] | ||
| } | ||
| }); | ||
|
|
||
| ## Licence | ||
| require(["jquery", "app/jail"], function() { | ||
| $(function(){ | ||
| $('img.lazy').jail(); | ||
| }); | ||
| }); | ||
| ``` | ||
|
|
||
| For more information, you view example 14 and example 15 from the [demo folder](https://github.com/sebarmeli/JAIL/tree/master/demo) | ||
|
|
||
| ## Testing / Building the plugin | ||
|
|
||
| After getting node and npm, install grunt and grunt-jasmine-runner. | ||
|
|
||
| ```npm install grunt``` | ||
| ```npm install grunt-jasmine-runner``` | ||
|
|
||
| MIT License - see MIT-LICENSE.txt | ||
| You can run Jasmine specs through phantomjs with : | ||
|
|
||
| ```grunt jasmine``` | ||
|
|
||
| If you don't have phantomjs, please download it from [here](http://phantomjs.org/) | ||
|
|
||
| You can run JSHint, Jasmine specs and minification tool simply launching | ||
|
|
||
| ```grunt``` | ||
|
|
||
| ## Licence | ||
| Copyright (c) 2011-2012 Sebastiano Armeli-Battana | ||
| Licensed under the MIT license. | ||
| https://github.com/sebarmeli/JAIL/blob/master/MIT-LICENSE.txt |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.