Angular Core Dependency: ~1.3.0
Module License: MIT
Added by: Sam Deering
npm install angular-lazy-imageor
bower install afkl-lazy-image -pand set this script as a dependency
afkl.lazyImagein your app module.
style.cssfor some classes you can use (they prevent reflow and are optional)
<div afkl-lazy-image="//placehold.it/480x480 480w, //placehold.it/768x768 768w, //placehold.it/936x936" class="afkl-lazy-wrapper afkl-img-ratio-1-1 own-classname"></div>
The attributes are using the srcset setup. Your window will determine which image fits best (so the rules are very dynamic using w/h/x). The image will only be set when the parent container scrolls in the viewport (lazy loading) or scrollable directive. During loading a class 'afkl-lazy-image-loading' is set on the container so you can give loading state feedback to your visitor.
afkl-lazy-wrapperwill use height 0 trick,
afkl-img-ratio-1-1sets correct aspect ratio so container is 100% responsive as well (optional, include css)
afkl-image-containerto have a scrollable container
bash git config --global url."https://".insteadOf git://
Source file of this bower module is placed at 'src/lazy-image.js'. Our bower content is also available at 'dist/'
npm run update-webdriveronce to get latest chrome webdriver (e2e)
Now we can simply run:
grunt sampleto see the demo offline (live reload from src)
grunt unitto start unit test (report in target folder),
grunt unitBrowserfor debugging purpose
grunt e2eto start our end to end test, which uses local chrome, firefox and internet explorer
grunt packageto make a complete package which validates everything (used when making new package)
grunt updateto update our Angular lib (defined in package json) and verify if module works with some versions backwards as well
grunt ghpagesto update our documentation page
This module was made while working on our Travel Inspiration Finder at KLM.
As AngularJS itself, this module is released under the permissive MIT license.
Your contributions are always welcome. Feel free to ask for new features. Contributions by: SquadraCorse, ledzep2, TimonVS
Module stats last updated: 2017-11-14 15:00:03