Combine Js Lazy load (no external plugin) with responsive images breakpoints data-srcset . How should I fix this?

Question

I'm trying to combine Js Lazy load with responsive images breakpoints.

The algorithmic concept is to find image width values that offer a significant reduction in file size. Images are analyzed to find the best breakpoints on an image by image basis, rather than creating all possible image resolutions, and enables developers to easily create 'picture' and 'img' HTML5 elements based on the calculated breakpoints.

Everything works fine with the lazy-loading, but the data-srcset is not working as it should, unfortunately. The image displayed is always the one from the data src so the image breakpoints is not working at all.

I've made a Codepen to illustrate the problem. HERE: https://codepen.io/cat999/pen/bGEKwNE

How should I fix this?

$(document).ready(function() {
  var lazyloadImages;    

  if ("IntersectionObserver" in window) {
    lazyloadImages = document.querySelectorAll(".lazy");
    var imageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          var image = entry.target;
          image.src = image.dataset.src;
          image.classList.remove("lazy");
          image.classList.add("animated");
          image.classList.add("fadeIn");
          imageObserver.unobserve(image);
        }
      });
    });

    lazyloadImages.forEach(function(image) {
      imageObserver.observe(image);
    });
  } else {  
    var lazyloadThrottleTimeout;
    lazyloadImages = $(".lazy");
    
    function lazyload () {
      if(lazyloadThrottleTimeout) {
        clearTimeout(lazyloadThrottleTimeout);
      }    

      lazyloadThrottleTimeout = setTimeout(function() {
          var scrollTop = $(window).scrollTop();
          lazyloadImages.each(function() {
              var el = $(this);
              if(el.offset().top - scrollTop < window.innerHeight) {
                var url = el.attr("data-src");
                el.attr("src", url);
                el.removeClass("lazy");
                lazyloadImages = $(".lazy");
              }
          });
          if(lazyloadImages.length == 0) { 
            $(document).off("scroll");
            $(window).off("resize");
          }
      }, 20);
    }

    $(document).on("scroll", lazyload);
    $(window).on("resize", lazyload);
  }
})

    <meta name="viewport" content="width=device-width, user-scalable=no">



<img src="https://ik.imagekit.io/demo/img/image1.jpeg?tr=w-400,h-300" />
<img src="https://ik.imagekit.io/demo/img/image2.jpeg?tr=w-400,h-300" />
<img src="https://ik.imagekit.io/demo/img/image3.jpg?tr=w-400,h-300" />
<img
  alt="Image 03" class="lazy" src="https://via.placeholder.com/220x280?text=Img+03"
  data-src="https://www.matteogiordano.info/img/castle_c_scale,w_200.jpg"
  data-srcset="https://www.matteogiordano.info/img/castle_c_scale,w_200.jpg 200w,
https://www.matteogiordano.info/img/castle_c_scale,w_364.jpg 364w,
https://www.matteogiordano.info/img/castle_c_scale,w_486.jpg 486w,
https://www.matteogiordano.info/img/castle_c_scale,w_591.jpg 591w,
https://www.matteogiordano.info/img/castle_c_scale,w_681.jpg 681w,
https://www.matteogiordano.info/img/castle_c_scale,w_764.jpg 764w,
https://www.matteogiordano.info/img/castle_c_scale,w_846.jpg 846w,
https://www.matteogiordano.info/img/castle_c_scale,w_922.jpg 922w,
https://www.matteogiordano.info/img/castle_c_scale,w_993.jpg 993w,
https://www.matteogiordano.info/img/castle_c_scale,w_1064.jpg 1064w,
https://www.matteogiordano.info/img/castle_c_scale,w_1138.jpg 1138w,
https://www.matteogiordano.info/img/castle_c_scale,w_1201.jpg 1201w,
https://www.matteogiordano.info/img/castle_c_scale,w_1261.jpg 1261w,
https://www.matteogiordano.info/img/castle_c_scale,w_1329.jpg 1329w,
https://www.matteogiordano.info/img/castle_c_scale,w_1393.jpg 1393w,
https://www.matteogiordano.info/img/castle_c_scale,w_1397.jpg 1397w,
https://www.matteogiordano.info/img/castle_c_scale,w_1400.jpg 1400w"
  data-sizes="220px"/>