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

Подключение gif

подключение разных форматов

946 Кб

135 Кб

gif

webp

552 Кб

apng

250 Кб

avif

Инструкция

(скрыть)

Принцип вставки тот же, что и в прошлом уроке. Первым ставим самый неизвестный формат, т.е. apng. Всегда вставляй стандартный формат gif внутрь тега <img>, ибо поддержка анимированных форматов на данный момент не такая хорошая.

Скопируй код и вставь его в блок 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 {я беру последний кадр из анимации}, само gif-изображение.

Скопируй код 1 и вставь его в блок HTML
Замени внутри ссылки на нужные: внутрь scr ссылку на заставку, в data-src ссылку на gif
Скопируй код 2 и вставь его в блок T123 в низ страницы
Протестируй работу через вкладку сеть

<!-- Сделала Fedyaeva http://front-test.tilda.ws/links ♥ -->
<style>
    .lazy {
        width: 100%;
        height: auto;
    }
</style>
<img class="lazy" src="ссылка на заглушку" data-src="ссылка на 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);
    });
  }
});
</script>

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

для фоновых изображений

Инструкция

(скрыть)

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

Скопируй код и вставь его в блок T123.
Замени класс test-shape на свой. Обрати внимание, что в начале обязательно стоит класс block--visible без пробела. Не пытайся написать его самостоятельно.
Найди класс test-shape внутри скрипта и замени его на свой.
В случае, если у тебя несколько объектов, которым ты прописываешь фон — скопируй все, что есть в стилях, вставь ниже и пропиши класс нового объекта. Внутри скрипта в этих ".test-shape" кавычках поставь запятую и напиши класс нового объекта.

Пример:
.block--visible.test-shape .tn-atom {
background-image: url('ссылка');
background-size: cover;
background-repeat: no-repeat;
}
.block--visible.test-shape-2 .tn-atom {
background-image: url('ссылка');
background-size: cover;
background-repeat: no-repeat;
}

let lazyImages = [].slice.call(document.querySelectorAll(".test-shape, .test-shape-2"));

<!-- Сделала Fedyaeva http://front-test.tilda.ws/links ♥ -->
<style>
    .block--visible.test-shape .tn-atom {
        background-image: url('https://images.unsplash.com/photo-1675019335923-05c6ddce8546?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80');
        background-size: cover;
        background-repeat: no-repeat;
    }
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
  let lazyImages = [].slice.call(document.querySelectorAll(".test-shape"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.classList.add('block--visible');
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  }
});
</script>

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

для видео

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

Инструкция

(скрыть)

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

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

<!-- Сделала Fedyaeva http://front-test.tilda.ws/links ♥ -->
<video class="lazy" autoplay muted loop playsinline poster="ссылка на заглушку" style="width: 100%; height: auto;">
  <source data-src="ссылка на видео" 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>

Связаться