Lazy Loading

Easily LazyLoad Images, iFrames, Background Images or HTML5 Videos to make your Pages load faster than ever for your Website's Visitors.

Getting Started

1
Activating Lazy Loading
Simply add the .lazy Class to activate Lazy Loading on that Element.

Types:
- data-src - Used for Images, iFrames, HTML5 Videos
- data-bg - Used for Background Images
2
Image
3
Image with an SVG Placeholder
Add an SVG Placeholder to the Image to avoid Page Jumps when the Images are Lazy Loaded.

Example:
Note: Pay attention to this viewBox='0 0 4 3' Code in the SVG. This should be replaced with your Image's Aspect Ratio. Also make sure that the width="800" and height="600" defined for your Image, matches the Aspect Ratio and is more than the actual Image Size. This will ensure that there are no warnings on Google.
4
Background Image
```
	...
```
5
iFrame
```
	
```
6
HTML5 Videos
```
	
	
```