트래픽을 아끼기 위해 마우스 스크롤 내릴때마다 이미지 다운로드 되는 방식으로 하게 하고싶습니다.
구글에서 찾아낸게 lazy 방식인데 적용하는 방법 알고계시는분 계신가요?
이미지 코드에 loading="lazy" 만 넣었을땐 안되네요..
| PHP | PHP 7.2 |
|---|---|
| CMS | Rhymix 1.x |
-
-
와~ 매우 유용한 기술인 것 같아요 감사합니다 퀵리뷰해보니 내용이 많이 기네요ㅠㅠ 찬찬히 다시보고 공부해봐야겠어요 -
?
참고해보겠습니다.
감사합니다~!
-
최근 브라우저라면 별도의 스크립트 없이 loading="lazy" 속성만으로 어느 정도의 효과를 거둘 수 있을 텐데요. 오래된 브라우저를 위한 polyfill도 있고요. 만약 이 기능이 작동하지 않는 것처럼 보인다면 이미 캐싱된 이미지 때문이거나, 스크롤 효과를 임의로 조작하는 서드파티 자료의 영향은 아닌지 먼저 확인해 보시기 바랍니다.
-
<img> 태그 loading="lazy" 적용 잘됩니다.
개발자모드 - 네트워크에서 스크롤 내릴때 이미지 로드되는거 확인 가능합니다. -
?
제가 테스트중인데 안되네요.. 개발자 모드에서도 한번에 다 다운로드가 됩니다.
테스트 url 입니다.
https://24post.co.kr/imglazy.html
https://helloinyong.tistory.com/297
img 태그에 src를 data-src 으로 치환시켜서 해당 데이터를 그대로 만들어야 하므로 게시글 작성될때 모듈 또는 애드온으로 src항목을 data-src으로 치환할 수 있게 제작하셔야 할듯합니다.
자세한건 위링크 참고하셔서 구현해야할 항목들을 확인해보시고 구현하시기 바랍니다 :)