JSFiddle - React, Tailwind, and code Playground

by top_coder_pro

HTML

<img src="http://s15.postimg.org/rntbl3kvf/mob.jpg" data-tab="img/ipad.jpg"  data-dsk="http://s28.postimg.org/uy5jt0f0d/image.jpg" >

JavaScript

/////////// Yatch Images ///////////////
// Programmed b Banmeet Singh //

var sSize=768; // Hign End Mobile Phones //
var mSize=1024; // Tables like Ipad OR sOMETHNG
var lSize=1336; // Laptops 15 inch
var xlSize=1440;  // Desktop  24 inch



var images = document.getElementsByTagName('img'); // Grab All Images


////////////////// Check Resoluaion ////////////////////////
function checkRes()
{
	width = document.documentElement.clientWidth; // grab the width of the screen //
	console.log(width);

	// Cycle through all images //
	for (var i = 0; i < images.length; i++)
	{   
		var thePath=""; // Grabs the Current Path //
		var defaultImg =images[i].getAttribute('src'); // grabs the image src (The Default Image)
		var thisImage=images[i];  // Grab Current Image //		



// Resolution Match and Image Fix //
if (width>=xlSize) {

	if (thisImage.getAttribute("data-dsk")!=null) 
	{ // If Desktop Image has been defined..

		thePath = thisImage.getAttribute('data-dsk');
		thisImage.src=thePath;
	}
	else
	{
		
		thisImage.src=defaultImg;

	}
	
}

// End Image Res Match and Fix

}
};
///////////////// End Check Resolutions ////////////////////
// First Time Function Run
checkRes();
// Attached Browser Resize Event Listener //////////
window.addEventListener('resize', checkRes);