해골 스크린. css뿐만 아니라 이벤트 발화까지의 해설

하고 싶은 일의 흐름

이하 intersectionObserverAPI로 요소가 들어오면 발화하는 이벤트 순서
1. 표시하고 싶은 요소의 이미지 부분(로드에 시간이 걸리는 장소)만 스켈레톤 스크린으로 하기 위해, css용의 클래스 부여
2. 배너 이미지를 얻는 함수 실행
3. window.addEventListener('load', function() {}) 이벤트에서 이미지 로드가 끝나면 숨기기 위해 부여한 클래스를 삭제. ※처음에는 setTimeout으로 초수를 설정해 발화 타이밍을 설정했지만, 이것이라면 화상을 로드가 완료했는지와 관계없을 때에 발화해 버린다.

결과

동영상 이미지

이미지 이미지

소스 전체

lazyload.js

document.addEventListener("DOMContentLoaded", function () {
  let lazyObjects = [].slice.call(document.querySelectorAll(".lazy img, .lazy, .businessList__thumb > img"));
  // IntersectionObserver対応ブラウザのみ実行
  if ("IntersectionObserver" in window) {
    // IntersectionObserverオブジェクト生成
    let lazyObjectsObserver = new IntersectionObserver(function (entries, observer) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          let lazyObject = entry.target;
          if (lazyObject.dataset.hasOwnProperty('bnr01') || lazyObject.dataset.hasOwnProperty('bnr02')) {

            $('.bnrList__link').addClass('loading__bnr animate__bnr');
            // 1. intersectionObserverAPIで要素が入ってきたらloading__bnr animate__bnrクラスを付与してimgタグを非表示にしておく
            // この時点でアニメーションがスタートする

            var loadBnr = new Promise(function () {
              // 2. バナー画像を取得する関数を記述
            })

            loadBnr
              .then(
                window.addEventListener('load', function () {
                // 3. 画像の読み込みが終わったら先ほど付与したクラスを削除（通常のデザインに戻す）
                  $('.bnrList__link').removeClass('loading__bnr').removeClass('animate__bnr');
                })
              )
              .catch(function () {
                console.log('Promise 失敗')
              })
          }
          lazyObject.classList.remove("lazy");
          lazyObjectsObserver.unobserve(lazyObject);
        }
      });
    });
    lazyObjects.forEach(function (lazyObject) {
      lazyObjectsObserver.observe(lazyObject);
    });
  }
});

1. intersectionObserverAPI로 요소가 들어오면, 표시하고 싶은 요소의 이미지 부분(로드에 시간이 걸리는 장소)만 스켈레톤 스크린으로 하기 때문에, 스켈레톤 스크린의 애니메이션용의 클래스 부여(img태그를 비표시)

intersectionObserverAPI에 관해서는 다른 기사가 알기 쉬웠으므로, 참고로 해 보세요.

참고 : Intersection Observer API를 사용하여 이미지 지연 로드
참고 : 이미지 및 동영상 지연 로드

요소가 화면에 들어오면 대상 이미지를 숨기고 애니메이션을 시작합니다.

lazyload.js

$('.bnrList__link').addClass('loading__bnr animate__bnr');

example.css

.loading__bnr {
  height: 130px;
  width: 100%;
  margin: 0 auto;
  border-radius: 5px;
}
.loading__bnr img {
  display: none;
}

/* animation */
.animate__bnr {
   animation : loading 2s infinite;
   background: linear-gradient(to right, #eff1f3 4%, #e2e2e2 25%, #eff1f3 36%);
   background-size: 1000px 100%;
}
@keyframes loading {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

참고 : The Loading Shimmer!

2. 배너 이미지를 얻는 함수 작성

각각 기재하십시오

3. window.addEventListener('load', function() {}) 이벤트로 이미지 로드가 끝나면, 숨기기 위해서 부여한 클래스를 삭제.

lazyload.js

window.addEventListener('load', function () {
  // 3. 画像の読み込みが終わったら先ほど付与したクラスを削除（通常のデザインに戻す）
  $('.bnrList__link').removeClass('loading__bnr').removeClass('animate__bnr');
})

감상

window.addEventListener('load', function() {}) 로 하면 해당 화상 뿐만이 아니라, 다른 자원도 취득하지 않으면 발화하지 않기 때문에, 화상 표시가 느려지는 것은? 라는 의문이 있다.
실제로 구현하면 거기까지 리소스 읽어들이기에 시간이 걸리지 않았기 때문에 OK로 하고 있다( window.addEventListener('load', function() {}) 더 나은 기술 방법이 있으면 알고 싶다. 우선 실장해 보고 개선해 나가는 방법으로 진행하려고 한다.

디자인적으로 보여주고 싶을 뿐만 아니라, 기능적으로 하지 않으면 의미가 없다는 인식. 스켈레톤 스크린 넣기 위해 페이지 속도가 낮아지거나 이미지 표시가 느려지면(실제로는 이미지를 취득할 수 있는데, 스켈레톤 스크린을 표시해, 거기의 전환 타이밍 어떻게 제어하는 ​​것인가라는 과제가 해결되지 않았다 그럼) 넣지 않아도 좋을지도 생각한다.

참고

Intersection Observer API를 사용하여 이미지 지연 로드

이미지 및 동영상 지연 로드

The Loading Shimmer!