easy script for ai2html files

script.js

// easy script for ai2html files
// ai2html uses css's display block/in-line to show correct artboards depending on screen size.
// if we not use some script like this one or a lazy load plugin our reader will download one png file for each artboard although he is not seeing it.

// function that manage every time the screen is resized. Avoids to call 'checkimages' function multiples times.
  function debounce(fn, delay) {
    var timer = null;
    return function () {
      var context = this, args = arguments;
      clearTimeout(timer);
      timer = setTimeout(function () {
        fn.apply(context, args);
      }, delay);
    };
  }

  // check what div is hidden and what doesnt.
  function isHidden(el) {
    return el.offsetWidth > 0;
  }
  // function changes the data-src attribute to src forcing to downloading the correct image.
  function checkImages(){
    var imagesArray = document.querySelectorAll(".g-aiImg");
    for (var i in imagesArray) {
      if (isHidden(imagesArray[i])) {
        imagesArray[i].src = imagesArray[i].getAttribute("data-src");
      }
    }
  }

  //event listeners
  document.addEventListener('DOMContentLoaded', checkImages);
  window.addEventListener('resize', debounce(checkImages, 300));
})()