SOW : Core Plugins

SOW : Lazyload

There are tons of lazyload plugins but many of them are not complete or if they are, are too large because of a lot of unnecessary code. Smarty decided to have its own lazyload plugin because is a lot better to have full control and to be able to change it to work with any SOW plugin. And it's under 1Kb gzipped!

Note: the plugin is using IntersectionObserver() native function on all modern browsers. Because is missing in old browsers, images are loaded on page-load, as a fallback. To make it work like a modern browser, just include this polyfill before Smarty javascript core. 


/* 
	:: Plugin File
	src/js/sow.core/sow.lazyload.js


	:: SOW Controller Init
*/	$.SOW.core.lazyload.init('.lazy');



/* 
	:: Plugin Options|Defaults

*/	$.SOW.core.lazyload.init('.lazy', {
		threshold: 	0.1, // 0 - 1; 1 = when 100% of the target is visible 
});

Before using lazyload (highly recommended, wherever it's possible) the best practice is to use containers to prevent content reflow. Also, for users is not very nice when the page "jump" on scroll because new images are loaded.

We use responsive containers - basically empty SVG's! Smarty uses them alot, especially to set images as backgrounds to solve many size issues! Using standards is recommended, if possible.
Here are the recommended formats (standards): 


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==">
Easier as visuals
16:9 Base64 SVG
16:9
1:1 Base64 SVG
1:1
2:3 Base64 SVG
2:3
923:742 Base64 SVG
923:742

Examples

...
...
...
...

Iframe Example

Local Video

Background Image

...

SMARTY REBORN

EXTRA LIGHTWEIGHT • FULLY SCALLABE • MODERN

Get Smarty Reborn 

<!--
	image 
	the base64 is 1x1px transparent png image to keep the markup valid.
	can be replaced with other valid image, as a "preloader".
-->
<img class="lazy bg-light bg-cover w-100" 
	data-lazy-toggle-class="animate-fadein" 
    data-src="demo.files/images/unsplash/covers/room-7DzpP1IVo8Y-unsplash.jpg" 
    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5MjMgNzQyIiAvPg==" 
    alt="...">

<noscript><!-- used as a fallback, in case the client disabled javascript -->
    <img class="w-100" src="demo.files/images/unsplash/covers/room-7DzpP1IVo8Y-unsplash.jpg" alt="...">
</noscript>




<!-- responsive image, using srcset -->
<img class="lazy img-fluid" data-lazy-toggle-class="animate-fadein" 
	data-src="image.jpg" 
	data-srcset="image.jpg 800w, image-2x.jpg 1600w" 
	src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5MjMgNzQyIiAvPg=="
	alt="...">

<noscript><!-- used as a fallback, in case the client disabled javascript -->
    <img class="w-100" src="image.jpg" srcset="image.jpg 800w, image-2x.jpg 1600w" alt="...">
</noscript>




<!-- iframe / youtube / vimeo  -->
<div class="embed-responsive embed-responsive-16by9">
    <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>




<!-- 
	local video 
	Please keep in mind: working as expected but because video source has no 
			     src="...", markup is invalid according to W3
-->
<div class="embed-responsive embed-responsive-16by9">
    <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>




<!-- 
	background image 

	NOTE: Optional but recommended in production
		For mobile devices, you can add a second attribute:
		data-background-image-xs="..."

-->
<div class="lazy bg-dark overlay-dark overlay-opacity-5 d-flex align-items-center justify-content-center text-white" data-background-image="../demo.files/images/unsplash/covers/room-_A_UV188rqk-unsplash.jpg">

	<!-- optional line lenses -->
	<div class="position-absolute absolute-full w-100 overflow-hidden">
		<img class="img-fluid" width="2000" height="2000" src="assets/images/masks/shape-line-lense.svg" alt="...">
	</div>

	<div class="text-center pt--180 pb--180">

		<h1 class="m-0">
			SMARTY REBORN
		</h1>

		<p>
			EXTRA LIGHTWEIGHT • FULLY SCALLABE • MODERN
		</p>

		<p class="mt-5 mb-0">
			<a href="https://wrapbootstrap.com/theme/smarty-website-admin-rtl-WB02DSN1B" class="btn btn-pill btn-warning transition-hover-top">
				Get <b>Smarty Reborn</b>
			</a>
		</p>

	</div>

</div>
Jump To