Lazyload изображение в атрибуте предварительного просмотра данных - PullRequest
Новая
       10

Lazyload изображение в атрибуте предварительного просмотра данных

0 голосов
/ 03 июля 2018

В настоящее время я реализую ленивую загрузку изображения с помощью следующего кода, этот код от Google. 

<img class="lazy" src="placeholder-image.jpg" data-src="image-to-lazy-load-1x.jpg" data-srcset="image-to-lazy-load-1x.jpg 1x" alt="I'm an image!">

document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.srcset = lazyImage.dataset.srcset;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Possibly fall back to a more compatible method here
  }
});

Теперь мне нужно реализовать эту технику для <li>, это <li> заходи внутрь слайдера. 

 <li data-preview="sliders/my-image.jpg" data-ulr-link="#">  some html </li>

как я могу применить ленивую загрузку для изображения в атрибуте data-preview.

...