JSFiddle - React, Tailwind, and code Playground

by Arkkimaagi

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title></title>
</head>
<body>
    <noscript data-img='x100/sample.png' data-alt='Sample image' data-triggers="320,768,980" data-sizes="300,748,960">
        <img src="http://placehold.it/320x100/sample.png" alt="Sample image"> 
    </noscript>
</body>
</html>

JavaScript

var path_prefix="http://placehold.it/";

//This is for device screen size
//var wdth = screen.width;

//This is for browser screen size
var wdth=document.documentElement.clientWidth;


$('noscript[data-img]').each(function(){
    //Function to handle parameters
    function splitdata(str){
        str+="";
        if(str.indexOf(",") != -1){
            return str.split(",");
        }else{
            return [str];
        }
    }
    var triggers = splitdata($(this).data('triggers'));
    var sizes = splitdata($(this).data('sizes'));
    
    //If no match is found, default to largest size
    var path = path_prefix + sizes[sizes.length-1];
    //Loop trough all triggerpoints and use image if available width is smaller than trigger
    for(var i=0;i<triggers.length;i++){
        if(wdth <= triggers[i]){
            path=path_prefix+sizes[i];
            break;
        }
    }
    $('<img src="' + path+ $(this).data('img') + '" alt="' + $(this).data('alt') + '" />').insertAfter($(this));
});