728x90
Lazy Loading
Lazy Loading은 페이지 렌더링 시점에 중요하지 않는 리소스 로딩을 추후에 필요할 때 로드가 되도록 하는 것을 말합니다. 한 마디로 블로그 속도개선에 도움되는 효과입니다. 큰 효과를 볼 수 있는 것은 아니지만 데이터는 쌓이고 쌓여 좋은 결과를 낼 수 있기 때문에 미리 준비해 두면 좋을 것으로 예상합니다. 그럼 적용방법에 대해 알아보겠습니다. 일단 아래 파일을 다운로드하여 티스토리 스킨에 업로드합니다.
적용방법
파일을 업로드하셨다면, 파일의 링크 주소를 복사하여 아래 스크립트 해당 위치에 붙여 넣어 줍니다.
<!-- 이미지 지연 시작 -->
<script>
document.addEventListener("DOMContentLoaded",()=>{let e=!1;const t=e=>{e.classList.contains("loaded")||
(e.src=e.dataset.src,e.removeAttribute("data-src"),e.dataset.srcset&&(e.srcset=e.dataset.srcset,e.removeAttribute("data-srcset")),e.classList.add("loaded"))},s=e=>{e.dataset.src=e.src,e.dataset.src&&
(e.dataset.srcset=e.srcset,e.removeAttribute("srcset")),e.src="업로드한 파일 링크 주소"}
;if("IntersectionObserver"in window){const e=new IntersectionObserver((e,s)=>{e.forEach(e=>{if(!e.isIntersecting)return;const
r=e.target;t(r),s.unobserve(r)})},{root:null,rootMargin:"200px"});document.querySelectorAll(".imageblock img,.imagegridblock img").forEach(t=>{s(t),e.observe(t),t.classList.add("observing")})}else{const r=()=>
{const{scrollY:e}=window;document.querySelectorAll(".imageblock img,.imagegridblock img").forEach(s=>
{if(s.classList.contains("loaded"))return;const
r=s.parentNode.offsetTop;r+s.offsetHeight>e&&e+window.innerHeight>r&&t(s)})};document.querySelectorAll(".imageblock img,.imagegridblock img").forEach(o=>{s(o),r(),window.addEventListener("scroll",()=>{e||(window.requestAnimationFrame(()=>{t(),e=!1}),e=!0)},{passive:!0})})}});
</script>
<!-- 이미지 지연 끝 -->링크주소를 붙여 넣고 완성된 스크립트는 HTML편집 <head> </head> 사이에 붙여 넣습니다. 완성되었습니다. 확인해 보시면 크게 다른 점은 못 느끼실 수 있으나 아주 좋은 효과를 얻으셨습니다.
완성
좋은 것은 적용해 보고 나에게 맞는지 확인해 보는 것이 좋습니다. 레이지 로딩을 적용하시고 좋은 효과를 보셨다는 분들이 많으면 좋겠습니다. 그럼 오늘도 목적달성에 한발 나아가시길 바랍니다.
하나씩 해보면 어려운건 없습니다.
728x90
