Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
layzr.js - npm Package Compare versions
Comparing version 1.1.4 to 1.1.5
| { | ||
| "name": "layzr.js", | ||
| "version": "1.1.4", | ||
| "version": "1.1.5", | ||
| "description": "A small, fast, modern, and dependency-free library for lazy loading.", | ||
@@ -5,0 +5,0 @@ "homepage": "http://callmecavs.github.io/layzr.js/", |
173
README.md
| # Layzr.js | ||
| [](https://www.npmjs.com/package/layzr.js) [](http://bower.io/search/?q=layzr.js) [](https://gitter.im/callmecavs/layzr.js?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) | ||
| A small, fast, modern, and dependency-free library for lazy loading. | ||
| * [Project/Demo Page](http://callmecavs.github.io/layzr.js/) | ||
| * [NPM Page](https://www.npmjs.com/package/layzr.js) | ||
| * [Demo Page](http://callmecavs.github.io/layzr.js/) | ||
| ## Docs | ||
| ## Usage | ||
| See the project page for documentation. Section links below: | ||
| Lazy loading boosts page speed by deferring the loading of images until they're in (or near) the viewport. This library makes it completely painless - maximizing speed by keeping options to a minimum. | ||
| * [Usage](http://callmecavs.github.io/layzr.js/#usage) | ||
| * [Options](http://callmecavs.github.io/layzr.js/#options) | ||
| * [Browsers](http://callmecavs.github.io/layzr.js/#browsers) | ||
| ### Install | ||
| Load the script. | ||
| [Download it](https://github.com/callmecavs/layzr.js/archive/master.zip), install it with [NPM](https://www.npmjs.com/package/layzr.js), or install it with [Bower](http://bower.io/search/?q=layzr.js). | ||
| ```html | ||
| <script src="layzr.js"></script> | ||
| ``` | ||
| ### Image Setup | ||
| For each `img` and/or `iframe` you want to lazy load, put the `src` in the `data-layzr` attribute. | ||
| ```html | ||
| <img data-layzr="image/source"> | ||
| <iframe data-layzr="media/source"></iframe> | ||
| ``` | ||
| This is the only _required_ attribute. Advanced, _optional_ configuration follows: | ||
| #### (Optional) Placeholders | ||
| Include a placeholder, via the `src` attribute. | ||
| Images without a placeholder - _before_ they're loaded - may impact layout (no width/height), or appear broken. | ||
| ```html | ||
| <img src="optional/placeholder" data-layzr="image/source"> | ||
| ``` | ||
| #### (Optional) Retina Support | ||
| Include a retina (high-resolution) version of the image in the `data-layzr-retina` attribute. This source will only be loaded if the [devicePixelRatio](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio) is greater than 1. | ||
| Ensure the proper CSS is in place to display both regular and retina images correctly. This library handles the loading, but not the displaying, of elements. | ||
| ```html | ||
| <img data-layzr="image/source" data-layzr-retina="optional/retina/source"> | ||
| ``` | ||
| #### (Optional) Background Images | ||
| Include the `data-layzr-bg` attribute to load the source as a background image. | ||
| The `data-layzr-bg` attribute should be valueless - the image source is still taken from the `data-layzr` and `data-layzr-retina` attributes. | ||
| ```html | ||
| <img data-layzr="image/source" data-layzr-bg> | ||
| ``` | ||
| ### Instance Creation | ||
| Create a new instance, and that's it! | ||
| ```javascript | ||
| var layzr = new Layzr(); | ||
| ``` | ||
| Documentation for all options follows: | ||
| ## Options | ||
| Defaults shown below: | ||
| ```javascript | ||
| var layzr = new Layzr({ | ||
| selector: '[data-layzr]', | ||
| attr: 'data-layzr', | ||
| retinaAttr: 'data-layzr-retina', | ||
| bgAttr: 'data-layzr-bg', | ||
| threshold: 0, | ||
| callback: null | ||
| }); | ||
| ``` | ||
| Explanation of each follows: | ||
| ### selector | ||
| Customize the selector used to find elements to lazy load - using CSS selector syntax. | ||
| ```javascript | ||
| var layzr = new Layzr({ | ||
| selector: '[data-layzr]' | ||
| }); | ||
| ``` | ||
| ### attr / retinaAttr | ||
| Customize the data attributes that image sources are taken from. | ||
| ```javascript | ||
| var layzr = new Layzr({ | ||
| attr: 'data-layzr', | ||
| retinaAttr: 'data-layzr-retina' | ||
| }); | ||
| ``` | ||
| ### bgAttr | ||
| Customize the data attribute that loads the image as a background. | ||
| ```javascript | ||
| var layzr = new Layzr({ | ||
| bgAttr: 'data-layzr-bg' | ||
| }); | ||
| ``` | ||
| ### threshold | ||
| Adjust when images load, relative to the viewport. Positive values make elements load _sooner_. | ||
| Threshold is a percentage of the viewport height - think of it as similar to the CSS `vh` unit. | ||
| ```javascript | ||
| // load images when they're half the viewport height away from the bottom of the viewport | ||
| var layzr = new Layzr({ | ||
| threshold: 50 | ||
| }); | ||
| ``` | ||
| ### callback | ||
| Invoke a callback function each time an image is loaded. | ||
| The image _may not be fully loaded before the function is called_. Detecting image load is inconsistent at best in modern browsers. | ||
| ```javascript | ||
| // in the callback function, "this" refers to the image node | ||
| var layzr = new Layzr({ | ||
| callback: function() { | ||
| this.classList.add('class'); | ||
| } | ||
| }); | ||
| ``` | ||
| ## Browser Support | ||
| Layzr natively supports **IE10+**. | ||
| To add support for older browsers, consider including [Paul Irish's polyfill](https://gist.github.com/paulirish/1579671) for [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame). | ||
| There are currently no plans to include the polyfill in the library, in the interest of file size. | ||
| ## Colophon | ||
| * Site Design: [Chris Allen](https://dribbble.com/cp_allen) | ||
| * Stock Photos: [Unsplash](https://unsplash.com/) | ||
| * Heading Links: [heading-links.js](https://github.com/callmecavs/heading-links.js) | ||
| * Google Analytics Isogram: [isogrammer](http://isogrammer.com/) | ||
| * Inspiration: [Headroom.js](http://wicky.nillia.ms/headroom.js/), [jQuery Unveil](http://luis-almeida.github.io/unveil/) | ||
| * Education: [Paul Lewis](http://www.html5rocks.com/en/tutorials/speed/animations/) | ||
| ## License | ||
| MIT. © 2015 Michael Cavalea | ||
| ## Roadmap | ||
| - [ ] Publish to Bower | ||
| - [ ] Add to CDN? | ||
| [](http://forthebadge.com) |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by46.19%
16214
- Number of package files
- increased by14.29%
8
- Lines of code
- increased by20.16%
149
- Number of lines in readme file
- increased by747.62%
178
No dependency changes