Коды четвертого урока

946 Кб

135 Кб

gif

webp

552 Кб

apng

250 Кб

avif

Инструкция

(скрыть)

Принцип вставки тот же, что и в прошлом уроке. Первым ставим самый неизвестный формат.

Скопируй код и вставь его в блок HTML
Замени внутри ссылки на нужные
Пропиши alt и размеры изображения. На свой страх и риск оставляй decoding="async"

<!-- Сделала Fedyaeva http://front-test.tilda.ws/links ♥ -->
<picture>
  <source srcset="gif.png" type="image/apng">  
  <source srcset="gif.avifs" type="image/avif" /> 
  <source srcset="gif.webp" type="image/webp" /> 
  <img src="image.gif" width="450" height="330" alt="Cat boss" loading="lazy" decoding="async"> 
</picture>

отложенная загрузка для gif

Инструкция

(скрыть)

Для данного примера тебе нужны: заставка вместо gif {я беру последний кадр из анимации}, само gif-изображение.

Скопируй код 1 и вставь его в блок HTML
Замени внутри ссылки на нужные
Скопируй код 2 и вставь его в блок T123
Протестируй работу через вкладку сеть

<!-- Сделала Fedyaeva http://front-test.tilda.ws/links ♥ -->
<style>
    .lazy {
        width: 100%;
        height: auto;
    }
</style>
<img class="lazy" src="https://static.tildacdn.com/tild3837-3833-4966-b063-353734663036/ezgif-2-e8799dd7fe-p.png" data-src="https://static.tildacdn.com/tild6437-3332-4131-b662-306663343461/J7Aw.gif" alt="I'm cat boss! Big boss!">

<!-- Сделала Fedyaeva http://front-test.tilda.ws/links ♥ -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  let 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 {
  }
});
</script>

отложенная загрузка видео

Инструкция

(скрыть)

Для вставки видео тебе нужна заставка, которая покажется вместо видео, если оно не будет загружено, а также само видео.

Скопируй код 1 и вставь его в блок HTML
Замени внутри ссылки на нужные
Скопируй код 2 и вставь его в блок T123
Протестируй работу через вкладку сеть

<!-- Сделала Fedyaeva http://front-test.tilda.ws/links ♥ -->
<video class="lazy" autoplay muted loop playsinline poster="https://static.tildacdn.com/tild3430-6438-4538-a633-313366656531/__2023-01-12_003315.jpg" style="width: 100%; height: auto;">
  <source data-src="https://dl.dropboxusercontent.com/s/izjfvqtpofih4g9/ezgif.com-gif-maker.mp4?dl=0" type="video/mp4">
</video>

<!-- Сделала Fedyaeva http://front-test.tilda.ws/links ♥ -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));

  if ("IntersectionObserver" in window) {
    var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(video) {
        if (video.isIntersecting) {
          for (var source in video.target.children) {
            var videoSource = video.target.children[source];
            if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
              videoSource.src = videoSource.dataset.src;
            }
          }

          video.target.load();
          video.target.classList.remove("lazy");
          lazyVideoObserver.unobserve(video.target);
          video.target.play();
        }
        else {
            video.target.pause();
            video.target.currentTime = 0;
        }
      });
    });

    lazyVideos.forEach(function(lazyVideo) {
      lazyVideoObserver.observe(lazyVideo);
    });
  }
});
</script>

Связаться