Загружать изображения отдельно от загрузки страницы - PullRequest
Новая
       4

Загружать изображения отдельно от загрузки страницы

0 голосов
/ 27 мая 2020

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

Теперь я хочу загружать изображения отдельно от загрузки страницы. Как и в изображениях Google, страница загружается в течение 1 секунды, а изображения загружаются одно за другим без отображения загрузки страницы на вкладке браузера.

Как я могу этого добиться?

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

1 Ответ

1 голос
/ 29 мая 2020

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

Атрибут загрузки

Мы могли бы использовать встроенную отложенную загрузку с атрибутом loading .

Вот демонстрация . 

<div><img src="https://placeimg.com/410/410/any" loading="lazy" width="410" height="410"></div>

В настоящее время последняя версия Chrome, Firefox и Edge поддерживает нативную отложенную загрузку.

Имейте в виду, что порог расстояния зависит от браузеров.

Chrome

Пороговое значение расстояния, после которого начнется загрузка отложенного содержимого, зависит от факторов, включая текущее эффективное соединение тип и включен ли упрощенный режим. Расстояние выбрано таким образом, чтобы отложенный контент почти всегда завершал загрузку к тому времени, когда он становится видимым.

Firefox

Сообщает пользователю агент, чтобы отложить загрузку изображения до тех пор, пока браузер не оценит, что оно понадобится в ближайшее время. Например, если пользователь прокручивает документ, значение lazy приведет к тому, что изображение будет загружено незадолго до того, как оно появится в визуальном окне просмотра окна.

Intersection Observer

Мы также могли бы использовать IntersectionObserver API , чтобы определить, когда ваши изображения видны. Это обеспечивает лучшую совместимость в разных браузерах и дает больший контроль над тем, когда и как загружаются наши изображения.

CodePen

HTML

<div>
    <img src="data:," 
        data-src="https://placeimg.com/410/410/any" 
        class="lazy" 
        alt="" 
        width="410" 
        height="410" />
</div>

JS

document.addEventListener("DOMContentLoaded", lazyLoad);

function lazyLoad() {
  const images = [].slice.call(document.querySelectorAll("img.lazy"));
  var config = {
    // If the image gets within 500px in the Y axis, start the download.
    rootMargin: "500px 0px",
    // detect when visibility passes the 1% mark
    threshold: 0.01
  };

  if ("IntersectionObserver" in window) {
    const observer = new IntersectionObserver(showImage, config);

    images.forEach(function (image) {
      observer.observe(image);
    });
  }
}

function showImage(entries, observer) {
  entries.forEach(function (entry) {
    if (entry.isIntersecting) {
      const image = entry.target;
      image.src = image.dataset.src;

      observer.unobserve(image);
    }
  });
}

Существующие библиотеки

Существуют также существующие JavaScript библиотеки, например lazySizes .

...