var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
          var myArr = JSON.parse(this.responseText);
          myArr.forEach(function(o){
              const image = document.createElement('img');
              image.setAttribute('data-lazy', o.image.src);
              image.classList.add('lazy-loading');
              document.getElementById('img' + o.id).appendChild(image);
              if(o.subtitle != "undefined") { var descrp = "<span>"+o.subtitle+"</span>";} else {descrp = "";}
              document.getElementById('news-item--' + o.id).insertAdjacentHTML("beforeend", "<div class='news-content'>"+ o.title + descrp +"</div><div class='is-size-7 has-text-grey mt-2 news-date'>"+ o.date + "</div><a class='block-link' href='"+ o.link + "'></a></div>");
          });


        }
            // Sets an observer for each image
  lazyTargets = document.querySelectorAll('.lazy-loading');
  lazyTargets.forEach(lazyLoad);
  // The lazy loading observer
function lazyLoad(target) {
  const obs = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        const src = img.getAttribute('data-lazy');

        img.setAttribute('src', src);
        img.classList.add('fadeIn');

        observer.disconnect();
      }
    });
  });
  obs.observe(target);
}
      
  };
  xmlhttp.open("GET", "/json/front.json", true);
  xmlhttp.send();

      (async () => {
      if ('loading' in HTMLImageElement.prototype) {
          const images = document.querySelectorAll("img.lazyload");
          images.forEach(img => {
              img.src = img.dataset.src;
          });
      } else {
          const lazySizesLib = await import('/sites/all/themes/bulma/js/lazysizes.min.js');
          lazySizes.init();
      }
  })();