random image | lazyload with srcset | currently jpg only

app.js

// initialise example

import randomImage from './module/randomImage';
randomImage();

index.html

<img class="js-randomImage" data-sources='["image1", "image2"]' alt="Thats a random image" />

randomImage.js

/*
* currently jpg only!!
* srcset breakpoints are project exclusive
* @todo add option for other image sources
*/

module.exports = () => {
    const selector = '.js-randomImage';
    const imagePath = '/img/';
    const imagePlaceholders = document.querySelectorAll(selector);

    Array.prototype.forEach.call(imagePlaceholders, (el) => {
        const image = el;
        const sourcesArr = JSON.parse(image.dataset.sources);
        const randIndex = Math.floor(Math.random() * sourcesArr.length);
        const fileName = `${imagePath}${sourcesArr[randIndex]}`;

        image.srcset = `${fileName}-m.jpg 250w, ${fileName}-l.jpg 600w, ${fileName}-xl.jpg 968w, ${fileName}-xxl.jpg 1480w, ${fileName}-xxxl.jpg 2200w`;
        image.src = `${fileName}-xxxl.jpg`;
    });
};