이미지 lazy 사용방법

댓글 8

• 람보

  2022.05.07 16:28

  https://helloinyong.tistory.com/297

   

  img 태그에 src를 data-src 으로 치환시켜서 해당 데이터를 그대로 만들어야 하므로 게시글 작성될때 모듈 또는 애드온으로 src항목을 data-src으로 치환할 수 있게 제작하셔야 할듯합니다.

   

  자세한건 위링크 참고하셔서 구현해야할 항목들을 확인해보시고 구현하시기 바랍니다 :)

  좋아요 1
• 

  hatali

  2022.05.08 23:42
  @람보

  와~ 매우 유용한 기술인 것 같아요 감사합니다 퀵리뷰해보니 내용이 많이 기네요ㅠㅠ 찬찬히 다시보고 공부해봐야겠어요
  좋아요 0
• phochobo

  2022.05.14 06:04
  @람보

  참고해보겠습니다.

  감사합니다~!

  좋아요 0
• 

  기진곰

  2022.05.07 16:33

  최근 브라우저라면 별도의 스크립트 없이 loading="lazy" 속성만으로 어느 정도의 효과를 거둘 수 있을 텐데요. 오래된 브라우저를 위한 polyfill도 있고요. 만약 이 기능이 작동하지 않는 것처럼 보인다면 이미 캐싱된 이미지 때문이거나, 스크롤 효과를 임의로 조작하는 서드파티 자료의 영향은 아닌지 먼저 확인해 보시기 바랍니다.

  좋아요 1
• 에그시

  2022.05.10 02:59

  <img> 태그 loading="lazy" 적용 잘됩니다.
  개발자모드 - 네트워크에서 스크롤 내릴때 이미지 로드되는거 확인 가능합니다.

  좋아요 1
• phochobo

  2022.05.14 06:11
  @에그시

  제가 테스트중인데 안되네요.. 개발자 모드에서도 한번에 다 다운로드가 됩니다.
  테스트 url 입니다.
  https://24post.co.kr/imglazy.html
  좋아요 0
• 에그시

  2022.05.20 01:15
  @phochobo

  이거 이미지가 아니라 .mp4 동영상 확장자라 그런거같네요.

  좋아요 0
• YJSoft

  2022.05.20 01:42
  @phochobo

  mp4는 이미지가 아니라 동영상입니다.
  본문에 제대로 언급하시거나, 공지사항 8번에도 나와있듯이 확인가능한 링크라도 공유했다면 바로 답변받을수 있었을텐데요... 

  좋아요 0