Объедините Js отложенную загрузку (без внешнего модуля) с точками останова для отзывчивых изображений data-srcset. Как мне это исправить? - PullRequest
Новая
       27

Объедините Js отложенную загрузку (без внешнего модуля) с точками останова для отзывчивых изображений data-srcset. Как мне это исправить?

1 голос
/ 10 июля 2020

Я пытаюсь объединить Js Ленивую загрузку с точками останова отзывчивых изображений.

Концепция алгоритма c состоит в том, чтобы найти значения ширины изображения, которые позволяют значительно уменьшить размер файла размер. Изображения анализируются, чтобы найти лучшие точки останова для каждого изображения, а не создавать все возможные разрешения изображений, и позволяет разработчикам легко создавать элементы 'picture' и 'img' HTML5 на основе вычисленных точек останова.

С ленивой загрузкой все работает нормально, но data-srcset, к сожалению, не работает должным образом. Отображаемое изображение всегда является изображением из data src, поэтому точки останова изображения не работают вообще.

Я сделал кодовое слово, чтобы проиллюстрировать проблему. ЗДЕСЬ: https://codepen.io/cat999/pen/bGEKwNE

Как это исправить? 

$(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"/>
...