Chrome이 이미지 지연 로딩을 기본적으로 지원 했습니다.

구현도 정말 간단하고,

<img src="hello.png" loading="lazy" />

그리고, loading 속성을 추가하는 것만으로, 간단하게 지연 로드에 대응할 수 있습니다.

"굉장히 간단하고, 좋아 전부의 이미지 태그에.

loading="lazy"를 붙이면 이미지가 더 이상 표시되지 않습니다.

lazy-loading으로 이미지가 제대로 표시되지 않는 예를 아래 페이지에 넣었습니다.
이미지가 있음을 알기 쉽게 하기 위해 이미지 주위에 빨간색 테두리를 배치합니다.

아래와 같이 단지 오로지 고양이 이미지를 늘어놓은 사이트입니다. 퍼트가 잘 보이는 것처럼 보이지만 ...



스크롤 해보면, 어이...



이미지가 없습니다.

왜 이미지가 아닌가?

왜 이미지가 나오지 않는가? 이것은 CSS를 작성하는 데 문제가있었습니다.
아래와 같은 CSS로 이미지를 표시합니다.

<style>
.wrapper {
  width: 500px;
  margin-left: auto;
  margin-right: auto;
  min-height: 1000px
  display: flex;
  flex-wrap: wrap;
}
.element {
  margin: 20px;
  overflow: hidden;
  border: 2px solid red;
}

.element img {
  width: 100%;
  height: auto;
}
</style>

  <div class="wrapper">
    <div class="element"><img src="../img/0.png"  loading="lazy"></div>
    <div class="element"><img src="../img/1.png"  loading="lazy"></div>

    ひたすら同じエレメントが続く...
  </div>

문제는 element 에 있는 loading="lazy" 와 img 의 overflow: hidden 에 있습니다.

지연된 로딩 이미지는 처음에는 로드되지 않았으므로 높이 0px로 표시됩니다.
그대로 이미지 다운로드가 완료해도 0px 그대로 렌더링되어 버립니다.

따라서 이미지는 다운로드되어 있지만 높이 0px로 표시가 숨어 버리는 상태가 되었습니다.

어떻게 해야 하는가?

대응안 1. 폭 높이를 제대로 지정한다

htps : // 우ぇ b. v / 나치 ゔ ぇ zy 에 기재되어 있는 주의서를 제대로 읽지 않았습니다.



너비 높이 (width/height)를 위와 같이 지정하지 않으면 지연로드 타이밍에서 화면이 흔들립니다.
또, 이번과 같이 overflow: hidden; 로 지워져 버릴 가능성도 있는 것과, 폭 높이를 지정하지 않으면 퍼포먼스에도 영향이 있는 것 같기 때문에, width/height 를 제대로 지정합시다.



그렇다고해도, 반응형 사이트에서 이미지의 크기를 고정하는 것은 어렵지 않습니까? 라는 것도 있습니다.

대응안2. overflow: hidden 지우기

이미지의 부모에 있는 height: auto 가 원래 나쁘게 하고 있으므로, 이 녀석을 지우면 해결입니다.
하지만 디자인 관계로 지울 수 없을지도?

대응안 3. min-height: 30px라든지 지정해 버린다

이것은 조금 위험한 코드인 것 같습니다만, 일단 화상이 일부 표시되는 스페이스가 있으면, 화상 지연 로드 완료시에 overflow: hidden; 가 제대로 효과를 줍니다.

CSS로 작성하면 다음과 같습니다.

.element img {
  width: 100%;
  height: auto;
  min-height: 30px; // 30px でなくても良い
}

이 구현은 다음과 같습니다.

그러나 높이의 지정이 제대로 없기 때문에, 스크롤이 흔들리지요...별로 좋지 않은 구현입니다.

요약

단순히 img 태그에 lazy라고 붙이면 좋다고 하는 것은 아니고, CSS·디자인에의 영향도 제대로 생각해 lazy 속성을 붙이자. 라는 이야기였습니다.