Lazy Load(레이지 로드)란?

오프스크린 이미지(사용자가 보고 있는 화면에 보이지 않는 이미지)를 로딩하지 않고 있다가, 사용자가 스크롤을 움직여서 해당 이미지가 보여야 할 시점에 이미지를 로딩하는 기술입니다.

투명 이미지 업로드

이미지에 오류가 발생하면 티스토리에서 위 이미지를 집어넣습니다.
굳이 로딩하지 않아도 될 이미지를 로딩할 필요가 없으니, 이미지의 src에 1px * 1px짜리 이미지를 하나 넣어줘서 이미지에 아무런 오류가 발생하지 않도록 합니다.

1px * 1px에 아무런 색상 정보도 들어있지 않은 이미지입니다.
95바이트밖에 되지 않으니, 로딩 속도에 큰 영향을 끼치지 않습니다.

위 파일을 내려받아, 관리자 페이지 > 스킨 편집 > 파일업로드에서 이미지를 업로드합니다.

이미지 업로드가 끝나셨으면, 해당 이미지를 우클릭해서 이미지의 경로를 복사해주세요.

자바스크립트

document.addEventListener("DOMContentLoaded", () => {
  let TICKING = false,
    SCROLLY = window.scrollY;

  [...document.querySelectorAll(".imageblock img")].forEach(img => {
    // 본문에 들어간 이미지 src와 srcset 제거
    img.dataset.srcset = img.getAttribute("srcset"),
    img.dataset.src = img.src,
    img.removeAttribute("srcset"),
    img.src = "복사한_이미지_경로"
  }),

  window.addEventListener("scroll", () => {
    TICKING || (
      window.requestAnimationFrame(() => {
        // raf로 스크롤 이벤트 최적화
        SCROLLY = window.scrollY,

        [...document.querySelectorAll(".imageblock img")].forEach(img => {
          const offsetTop = img.offsetTop;
              
          !img.classList.contains("loaded"&& offsetTop + img.offsetHeight > SCROLLY && SCROLLY + window.innerHeight > offsetTop && (
            // 해당 이미지가 뷰포트 내부에 들어왔을 때 작동
            img.src = img.dataset.src,
            img.srcset = img.dataset.srcset,
            img.removeAttribute("data-src"),
            img.removeAttribute("data-srcset"),
            img.classList.add("loaded")
          )
        }),

        TICKING = false
      })
    )
  })
})

복사한 이미지 경로를 위 스크립트에 있는 "복사한_이미지_경로"에 붙여 넣으신 후, 위 스크립트를 앞에 삽입합니다.

document.addEventListener("DOMContentLoaded",()=>{let a=!1,b=window.scrollY;[...document.querySelectorAll(".imageblock img")].forEach(a=>{a.dataset.srcset=a.getAttribute("srcset"),a.dataset.src=a.src,a.removeAttribute("srcset"),a.src="복사한_이미지_경로"}),window.addEventListener("scroll",()=>{a||window.requestAnimationFrame(()=>{b=window.scrollY,[...document.querySelectorAll(".imageblock img")].forEach(a=>{const c=a.offsetTop;!a.classList.contains("loaded")&&c+a.offsetHeight>b&&b+window.innerHeight>c&&(a.src=a.dataset.src,a.srcset=a.dataset.srcset,a.removeAttribute("data-src"),a.removeAttribute("data-srcset"),a.classList.add("loaded"))}),a=!1})})});

똑같은 스크립트를 압축한 스크립트입니다. 마찬가지로 "복사한_이미지_경로" 를 복사하신 이미지 경로로 바꾸신 후 사용해주세요.

끝!

이제 다시 본인의 블로그로 돌아가셔서, 아무 글이나 클릭하신 후, Ctrl Shift R을 누르시거나 캐쉬를 초기화하신 후 페이지를 불러와 보시면 정상적으로 이미지의 로딩이 지연되고 있는 걸 확인하실 수 있을 겁니다.

profile

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

(?)

  1. 이미지가 많은 제블로그에 적용하면 어떨지 궁금하네요
    저녁에 테스트 블로그에 함 적용해봐야겠습니다 🙂

    그나저나 오랜만에 들어왔더니 많은 변화가 있는거같아요
    반가운 인사글 토글도 보이고 무엇보다 폰트가 아기자기하게 바뀌었네요

    폰트만 바꿔도 이렇게 분위기가 달리 느껴지는거같아요 b

    https://imgur.com/xDaLfIy.mp4

    1. 저는 스크롤 내리면 이미지가 바로바로 보이는 게 좋아서 사용하진 않지만, 방문자의 데이터를 아끼고 초기 페이지 로드 시간을 단축해주는 등 꽤 이점은 많은 스크립트입니다. 😀

      TWICE New Tab 사용자들은 홈 화면에서 인사말이 출력되도록 해뒀습니다 ㅎㅎ
      폰트는 한글날 기념으로 기업에서 이런저런 폰트를 많이 풀길래 한 번 바꿔봤고요.

      이런저런 차이점들 알아봐 주셔서 감사합니다! 😁

      https://imgur.com/QXPS5Eh.mp4

  2. 감사 합니다. 오프스크린 이미지 로딩 속도 해결 됐네요. ^^

    1. 댓글 감사합니다!
      저도 확인해보니 잘 작동 중인 것 같네요. ㅎㅎ
      즐거운 블로깅 되세요!