This extension allows you load the image assets on demand/asynchronously in a canvas element.
The Element Peek is required for this extension.
Additional Setup
– The “style.animate” is the same file used for Scroll Animation.
wp_enqueue_style('jquery-elementpeek-style', 'https://cdn.thedesignpeople.net/agentimage-libraries/style.animate.min.css');Inline Options
– A canvas/img object with a class of “ai-lazy” will be automatically binded to aiLazy with it’s default values.
– img tag should have default src=”” attribute to prevent validator issue.
– The object image source should be link to data-src=”http://www.agentimage.com/photo.jpg”
| Option | Default value | Description/Callback signature |
|---|---|---|
| data-class | This option will add additional class in object. You can add two or more classes |
|
| data-animation | fadeIn | You can find the list of animation on this link https://daneden.github.io/animate.css/ |
| data-offset | 0.3 | Percentage of the height of the viewport that the target element must occupy before being considered visible. A higher value means longer delay before ‘onViewportIn’ is triggered. |
Sample Usage
<canvas class="ai-lazy" width="500" height="400" data-src="http://www.thenarteygroup.com/wp-content/uploads/2017/10/25155-Piuma-Rd.jpg" data-class="custom-class-1" data-animation="fadeInUp" data-offset="0.5"></canvas>
<img src="" class="ai-lazy" width="500" height="400" data-src="http://www.thenarteygroup.com/wp-content/uploads/2017/10/25155-Piuma-Rd.jpg" data-class="custom-class-1" data-animation="fadeInUp" data-offset="0.5"/>Inline – Basic Implementation
Canvas Tag
IMG Tag
Script Implementation
– img tag should have default src=”” attribute to prevent validator issue.
– The object image source should be link to data-src=”http://www.agentimage.com/photo.jpg”
| Option | Default value | Description/Callback signature |
|---|---|---|
| class | This option will add additional class in object. You can add two or more classes |
|
| animation | fadeIn | You can find the list of animation on this link https://daneden.github.io/animate.css/ |
| peekAmount | 0.3 | Percentage of the height of the viewport that the target element must occupy before being considered visible. A higher value means longer delay before ‘onViewportIn’ is triggered. |
Sample Usage
jQuery(".my-element").aiLazy({
class: "my-new-class",
animation: "fadeInUp",
peekAmount: "0.5",
});
Script – Basic Implementation
