CODEWITHSUNDEEP
javascriptjqueryhtml
ilsloaoycd
ilsloaoycd

Reputation: 113

Responsive images using javascript by modifying image url; Without Picture Tag

I have what I consider a great website. I have 3 copies of every image on my site. One for very big displays, another for medium, and one more for mobile devices. If the screen width is smaller than a particular amount of pixels I would like to use javascript to add either -medium or -small to the file url. If there is a better way in HTML without the picture tag, using id's or something please mention it. Here is my code so far:

if (screen.width <= 799) {
   getElementsByTagName("img").setAttribute(src, ---url that is already here--+ -small);}

Thank You in Advance.

Upvotes: 1

Views: 715

Answers (2)

obscure
obscure

Reputation: 12891

getElementsByTagName() returns a HTMLCollection - an array. To get your individual image elements you need to loop over it using a for-loop.

var images=document.getElementsByTagName("img");
for(var a=0;a<images.length;a++)
{
}

Inside the loop, you can get the src attribute of each image using

images[a].src

Unfortunately this will return the complete path, the name of the image and the file extension e.g. .jpg. So before adding a string like -small to the filename you need to copy the file extension, strip it, add the string and finally readd the extension.

Here's an example:

var images = document.getElementsByTagName("img");
var fileName;
var extension;
for (var a = 0; a < images.length; a++) {
  extension = images[a].src.slice(images[a].src.length - 4, images[a].src.length)
  fileName = images[a].src.slice(0, images[a].src.length - 4)
  images[a].src = fileName + "-small" + extension;
  console.log(images[a].src)
}
<img src="http://www.example.com/picA.jpg">
<img src="http://www.example.com/picB.jpg">

Upvotes: 1

MomasVII
MomasVII

Reputation: 5071

Html

<img src="lowresPlaceholder.jpg" data-src="myImageURL" />

Javacscript

window.onload = function (){
    LoadDeferredAssets();
}

var loadDeferredAssets = function () {

    /* Search for images in the page */
    var imgDefer = document.getElementsByTagName("img");

    /* Iterate through the images on the page */
    for (var i=0; i < imgDefer.length; i++) {

        /* If the image element had the data attribute data-src we have held it's download */
        if(imgDefer[i].getAttribute('data-src')) {

            /* Download the required asset by updating the image element source */
            if($(document).width() < 799) {
                imgDefer[i].setAttribute( 'src', imgDefer[i].getAttribute('data-src') + "-small.jpg" );
            } else if($(document).width() > 1200) {
                imgDefer[i].setAttribute( 'src', imgDefer[i].getAttribute('data-src') + "-large.jpg" );
            } else {
                imgDefer[i].setAttribute( 'src', imgDefer[i].getAttribute('data-src') + "-medium.jpg" );
            }
        }
    }
}

This is what I have used but modified to match your use case so untested. With this the page avoids downloading any images until it knows which size to download. You can add a placeholder img src until an image is ready for download. This also makes sure the content is downloaded first and the images second making page load time much faster. Might require some tweaking if you are using a mix of png and jpg.

Upvotes: 1

Related Questions