me-lazyimg
me-lazyimg copied to clipboard
Published
20 hours ago •
wyntau
wyntau
Yet another image lazyload directive for angular.
me-lazyimg
Yet another image lazyload directive for angular.
With this directive, you can lazyload image in document. You can also lazyload image in specific element which have the overflow: auto or overflow:scroll css style.
What directive this module have?
- lazy-container, add to the container
- lazy-src, add to image tag
Basic Usage
-
include me-lazyimg.js as dependence.
var app = angular.module('myApp', ['me-lazyimg']) -
add
lazy-containerin scrollable container.<div lazy-container>...</div> -
instead
srcwithlazy-src.<img lazy-src="{{imgUrl}}" alt="" /> -
All Done!
Optional Parameters
Additional parameters can be added, example:
<img lazy-src="{{imgUrl}}" animate-visible="true" animate-speed="0.5s" alt="" />
The following is a list of all the additional parameters:
| Paramater | Remark | Value (Example) | Default Value |
|---|---|---|---|
animate-visible |
If set true, all images (include those initially visible) will be animated. Please note that by default initial visible images will be displayed immediately without fading | "true" | "false" |
animate-speed |
The speed of the animation in seconds or milliseconds | "0.5s" | "1s" |
License
MIT
wyntau