Loading images according to screen width

This uses HTML5 data attributes to load the image according to the screen width. For example, for laptops. it loads only laptop-sized images. saving bandwidth and optimizing speed.

Live example

```
//---------------------------Setting ViewPort Widths-----------------------//
var sSize=768; // High End Mobile Phones
var mSize=1024; // Tables like Ipad Or Something..
var lSize=1336; // Laptop 15 Inch
var xlSize=1500; // Desktop 22 Inch And Above

//------------------------------ Grabbing Images in Images Array ------------//
var images = document.getElementsByTagName('img');

//--------------------------------Checking Current Resolution Function -----------///
function checkRes()
{
var width = document.documentElement.clientWidth; // grab the width of the screen //
var currentFlag=""; // To Check the Final Resolution

// --------------------- Paths of Img To Grab ---------------------------//

var xlImgPath='data-xl';
var lImgPath='data-l';
var mlmgPath='data-m';
var slmgPath='data-s';

//------------------------------ Set CurrentFlag to the Current Browser Size /////////

if (width>=xlSize) {
currentFlag="xl";
}
else if (width>=lSize )
{
currentFlag="l";
}
else if (width>=mSize )
{
currentFlag="m";

}
else if (width<=sSize )
{
currentFlag="s";

}

//------------------------------- Cycle through all the Images And Attach the Proper Src ---------//////////
for (var i = 0; i < images.length; i++)
{
var thisImage=images[i]; // Grab Current Image //
var defaultImgSource =images[i].getAttribute('src'); // grabs the Current image src (The Default Image)

//-------------------------------------- Switch Case Accoring to Current Size ------------------

switch(currentFlag){

case 'xl':
if (thisImage.getAttribute(xlImgPath)!==null) // If Desktop Image has been defined..
{

thisImage.src=thisImage.getAttribute(xlImgPath); // Set The path of Image to

I have a few comments, which in no way substitute a full review.

Your indentation is inconsistent which makes your code unnecessarily hard to read.

Your comments are also inconsistent. I'm not going to prescribe you a commenting standard, but pick a style you like and stick with it.

Now we're talking about comments, the following is redundant:

var thisImage=images[i];  // Grab Current Image //

It's still clear what you're doing without the comment. It's commenting the 'what' of your code while you should only be commenting the 'why'. The 'what' is already obvious in this case, as it should be. You may be interested in reading Writing Readable Code, about readable code and what part comments play in this. Comments can be good, but they are often not necessary.

You're only using the width of the resolution. While most desktop screens use standard ratios, you seem to target mobile users. Mobile devices don't necessarily stick to standard ratios. For width your screen may be a small, but for height it could be a medium.

StackExchange Code Review Q#98131, answer score: 4