SOW : Lazyload

SOW plugins are part of Smarty Core, written from scratch!

src/js/sow.core/sow.lazyload.js

Lazyload Images

Load images only when user is scrolling down to improve speed & user experience.

A good practice for using lazyload is to use fixed containers (see Empty SVG) to prevent content reflow (also, to prevent "page jump" on scroll).
You can use responsive containers, meaning: empty images/SVG's or bootstrap .ratio class for backgrounds, if layout allow.

                  
										<!-- basic usage - like any other lazyload -->
										<img width="300" height="300" class="lazy" 
											data-src="image.jpg" 
											src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">

                  
										16:9
										BASE64: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiA5IiAvPg=="
										INLINE: "data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 9%22 /%3E"

										1:1
										BASE64: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxIDEiIC8+"
										INLINE: "data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1 1%22 /%3E"

										// - OR - smaller in size (the classic 1x1.gif but highly, highly optimized)
										"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="

										2:3
										BASE64: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyIDMiIC8+"
										INLINE: "data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 2 3%22 /%3E"


										923:742
										BASE64: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5MjMgNzQyIiAvPg=="
										INLINE: "data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 923 742%22 /%3E"

                  
										<!-- basic usage - like any other lazyload -->
										<img width="300" height="300" class="lazy" 
											data-src="image.jpg" 
											src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">

Visual dimensions

16:9

1:1

2:3

923:742

Smarty

lightweight • scallabe • modern

Get Smarty

                  
		                <div class="lazy" data-background-image="../demo.files/images/unsplash/covers/room-_A_UV188rqk-unsplash.jpg">

		                  ...

		                </div>

Lazyload Iframe

Preview
HTML

                  
	                  <div class="ratio ratio-16x9 bg-light">
	                    <iframe class="lazy" data-lazy-toggle-class="animate-fadein" width="560" height="315" data-src="https://www.youtube.com/embed/YXNk4gQCPSY" allowfullscreen data-index="1"></iframe>
	                  </div>

Lazyload Local video

Preview
HTML

                  
		                <div class="ratio ratio-16x9 bg-light">
		                  <video class="lazy" data-lazy-toggle-class="animate-fadein" width="560" height="315" controls loop muted>
		                    <source data-src="../demo.files/video/hd0936.mp4" type="video/mp4">
		                    <source data-src="../demo.files/video/hd0936.ogg" type="video/ogg">
		                  </video>
		                </div>