Нестабильная отложенная загрузка в обновленном браузере Chrome - PullRequest
Новая
       10

Нестабильная отложенная загрузка в обновленном браузере Chrome

0 голосов
/ 17 апреля 2020

У меня есть какой-то сайт, который я создал в начале 2019 года. С того времени все работало идеально, но недавно я понял, что ленивая загрузка в браузере Chrome ведет себя очень нестабильно. Эта проблема не существует в Firefox и Edge, где все еще работает хорошо. Под нестабильным поведением я подразумеваю работать или не работать после обновления веб-сайта.

Мой код js выглядит следующим образом: 

document.addEventListener("DOMContentLoaded", function () {
  var lazyloadImages;
  if ("IntersectionObserver" in window) {
     lazyloadImages = document.querySelectorAll(".lazy-img");
     alert("number of elements: " + lazyloadImages.length);
     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-img");
         imageObserver.unobserve(image);
       }
     });
    });
    lazyloadImages.forEach(function (image) {
      imageObserver.observe(image);
    });
  } else {
  var lazyloadThrottleTimeout;
  lazyloadImages = document.querySelectorAll(".lazy-img");
  function lazyload() {
    if (lazyloadThrottleTimeout) {
      clearTimeout(lazyloadThrottleTimeout);
    }
    lazyloadThrottleTimeout = setTimeout(function () {
      var scrollTop = window.pageYOffset;
      lazyloadImages.forEach(function (img) {
        if (img.offsetTop < window.innerHeight + scrollTop) {
          img.src = img.dataset.src;
          img.classList.remove("lazy-img");
        }
      });
      if (lazyloadImages.length == 0) {
        document.removeEventListener("scroll", lazyload);
        window.removeEventListener("resize", lazyload);
        window.removeEventListener("orientationChange", lazyload);
        }
      }, 20);
    }
    document.addEventListener("scroll", lazyload);
    window.addEventListener("resize", lazyload);
    window.addEventListener("orientationChange", lazyload);
  }
});

Я добавил предупреждение для целей тестирования. Когда я повторно ссылаюсь на sh веб-сайт вовремя, оповещение возвращает количество элементов, и ленивая загрузка работает нормально, а в другой раз он вообще не отображает предупреждение (даже пустой список), а ленивая загрузка не работает (нет картинки отображаются, только альтернативные тексты). Что может быть причиной этого? Любая помощь будет оценена.

1 Ответ

0 голосов
/ 17 апреля 2020

Спасибо за комментарии. Консоль отображает: 

[Deprecation] <source src> with a <picture> parent is invalid and therefore ignored. Please use <source srcset> instead

Я загружаю изображения следующим образом: 

<div class="product-container">
  <a href="sth.html">
  <picture>
    <source data-srcset="images/products/sth.webp" type="image/webp" class="product-img lazy-img" alt="sth">
    <source data-srcset="images/products/sth.png" type="image/png" class="product-img lazy-img" alt="sth">
    <img data-src="images/products/sth.png" class="product-img lazy-img" alt="sth">
  </picture>
  </a>
  <p class="product-descr"><b>Sth</b></p>
</div>

Это работало долгое время должным образом.

Так что это означает, что я должен сделать это так?: 

<div class="product-container">
  <a href="sth.html">
  <picture>
    <source data-srcset="images/products/sth.webp" type="image/webp" class="product-img" loading="lazy" alt="sth">
    <source data-srcset="images/products/sth.png" type="image/png" class="product-img" loading="lazy" alt="sth">
    <img data-src="images/products/sth.png" class="product-img" loading="lazy" alt="sth">
  </picture>
  </a>
  <p class="product-descr"><b>Sth</b></p>
</div>

Но что будет с другими браузерами? И это все еще не разрешает предупреждение от консоли.

...