티스토리 오프스크린 로딩 지연 코드 요약
티스토리의 로딩속도를 향상된 것처럼 보이기 위해서 오프스크린 로딩 지연을 사용할 수 있습니다. 물론 서버에서 지원하는 부분이 아니기에 완벽히 적용되지 않습니다. 다만 오프스크린 로딩 지연의 기능을 일부 가져올 수 있습니다.
티스토리 오프스크린 로딩 지연 코드 적용 난이도 : 중급
비용 : 무료
소요시간 : 30분
준비물 : 티스토리 블로그
최종 검토일 : 2022년 02월 05일
*itcider의 모든 글과 리소스, 파일은 itcider에 귀속되며, itcider의 허가 없는 무단 복제 및 전재는 저작권법 및 부정경쟁방지법에 의해서 경고 또는 처벌조치될 수 있습니다.* [copyright 2020-2022 itcider.com 모든 판권 보유]
그렇다면 티스토리 오프스크린 로딩 지연의 html 코드는 어떻게 되나요?
한줄만 <head>와 </head> 사이에 써주시면 됩니다. (ctrl + f를 눌러 <head로 검색하시면 됩니다)
<script src="https://cdn.jsdelivr.net/gh/itcider/tistory_lazy_load/itciderlazyload.js"></script>
<!--jsdelivr에서 코드를 불러옵니다-->
구글 lightspeed에서 Unable to locate resource /icore_images/라는 오류가 뜹니다.
일시적인 오프스크린 적용에 의한 오류일 수 있습니다. 다시 검사를 실시해보신다면 정상적으로 적용이 된 것을 알 수 있습니다.
참고하신 글이나 코드의 출처는 어디인가요?
티스토리에서 Lazy Load 사용하기
Lazy Load(레이지 로드)란? 오프스크린 이미지(사용자가 보고 있는 화면에 보이지 않는 이미지)를 로딩하지 않고 있다가, 사용자가 스크롤을 움직여서 해당 이미지가 보여야 할 시점에 이미지를 로
marshallku.com
marshall k님의 블로그 글 중에서 코드 중에서 이미지 부분 링크를 수정하고 코드를 1줄로 만들어 외부에서 불러올 수 있도록 만들었습니다.
위 블로그에 있는 코드를 참조하였습니다. 진심으로 감사합니다.
위 코드는 마음대로 수정해도 되나요?
저 코드에 대해서는 marshall k님께 문의드려봐야할 것 같습니다. 다만 이미지에 대해서는 자체 제작하였으므로 자유롭게 사용해주시면 됩니다.
# github
GitHub – itcider/tistory_lazy_load: tistory lazy load
tistory lazy load. Contribute to itcider/tistory_lazy_load development by creating an account on GitHub.
github.com
