티스토리 오프스크린 로딩 지연 코드

2022. 2. 5. 15:27티스토리/티스토리 팁

    목차
반응형

티스토리 오프스크린 로딩 지연 코드 요약

 
 

티스토리의 로딩속도를 향상된 것처럼 보이기 위해서 오프스크린 로딩 지연을 사용할 수 있습니다. 물론 서버에서 지원하는 부분이 아니기에 완벽히 적용되지 않습니다. 다만 오프스크린 로딩 지연의 기능을 일부 가져올 수 있습니다.


티스토리 오프스크린 로딩 지연 코드 적용 난이도 : 중급

비용 : 무료

소요시간 : 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

 

 

반응형

10분만에 해결하는 itcider의 상담


sns sns sns sns
  • 프로필사진
    재영2022.09.19 17:03

    이것때문에 정말 하루종일 막막했는데... 너무 간단하게 해결했습니다. 너무 감사합니다.

    • 프로필사진
      itcider2022.09.19 19:19 신고

      도움이 되어서 다행이네요 ~
      좋은 하루 보내시길 바랍니다~

      공유 api나 이미지 지연로드가 기본적으로 적용된 Fi스킨도 봐보시면 좋을 것 같습니다!