JSFiddle - React, Tailwind, and code Playground

by Ganesh

HTML

<b>Auto resize</b>
            
            <img alt="" data-sizes="auto" data-src="https://camo.githubusercontent.com/2f13916e881f95c539a1109fc83d07f8a23baa16/68747470733a2f2f692e696d6775722e636f6d2f656f4f71666b302e706e67"  data-srcset="https://farm9.staticflickr.com/8200/8248153196_7a7664e147_m.jpg 240w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147_n.jpg 320w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147.jpg 500w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147_b.jpg  800w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147_m.jpg 1024w" class="lazyload"  >

<b>Single Image Load</b>

            <img alt="" data-sizes="null" data-src="https://camo.githubusercontent.com/2f13916e881f95c539a1109fc83d07f8a23baa16/68747470733a2f2f692e696d6775722e636f6d2f656f4f71666b302e706e67"  data-srcset="https://farm9.staticflickr.com/8200/8248153196_7a7664e147_m.jpg 240w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147_n.jpg 320w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147.jpg 500w,
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTOcY6Wd3WuTmATAVUwIV1gQFX_Nkkgw0ErmRz74oc3_P357dJD 800w,
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTOcY6Wd3WuTmATAVUwIV1gQFX_Nkkgw0ErmRz74oc3_P357dJD 1024w" class="lazyload"  >


   

JavaScript

(function(window, factory) {
	var lazySizes = factory(window, window.document);
	window.lazySizes = lazySizes;
	if(typeof module == 'object' && module.exports){
		module.exports = lazySizes;
	}
}(window, function l(window, document) {
	'use strict';
	/*jshint eqnull:true */
	if(!document.getElementsByClassName){return;}

	var lazysizes, lazySizesConfig;

	var docElem = document.documentElement;

	var Date = window.Date;

	var supportPicture = window.HTMLPictureElement;

	var _addEventListener = 'addEventListener';

	var _getAttribute = 'getAttribute';

	var addEventListener = window[_addEventListener];

	var setTimeout = window.setTimeout;

	var requestAnimationFrame = window.requestAnimationFrame || setTimeout;

	var requestIdleCallback = window.requestIdleCallback;

	var regPicture = /^picture$/i;

	var loadEvents = ['load', 'error', 'lazyincluded', '_lazyloaded'];

	var regClassCache = {};

	var forEach = Array.prototype.forEach;

	var hasClass = function(ele, cls) {
		if(!regClassCache[cls]){
			regClassCache[cls] = new RegExp('(\\s|^)'+cls+'(\\s|$)');
		}
		return regClassCache[cls].test(ele[_getAttribute]('class') || '') && regClassCache[cls];
	};

	var addClass = function(ele, cls) {
		if (!hasClass(ele, cls)){
			ele.setAttribute('class', (ele[_getAttribute]('class') || '').trim() + ' ' + cls);
		}
	};

	var removeClass = function(ele, cls) {
		var reg;
		if ((reg = hasClass(ele,cls))) {
			ele.setAttribute('class', (ele[_getAttribute]('class') || '').replace(reg, ' '));
		}
	};

	var addRemoveLoadEvents = function(dom, fn, add){
		var action = add ? _addEventListener : 'removeEventListener';
		if(add){
			addRemoveLoadEvents(dom, fn);
		}
		loadEvents.forEach(function(evt){
			dom[action](evt, fn);
		});
	};

	var triggerEvent = function(elem, name, detail, noBubbles, noCancelable){
		var event = document.createEvent('Event');

		if(!detail){
			detail = {};
		}

		detail.instance = lazysizes;

		event.initEvent(name, !noBubbles,...