script에서 img load event를 사용하면 해당 url이 로딩될 때까지 기다리는 건가요?

Question

안녕하세요 Heropy님. 실습 중 궁금한 점이 있어 질문 드립니다. - MovieCard.svelte의 script에서 img Element를 생성하고, load event를 붙여서 로드되는지 감지하는데 이 load가 되는지는 아래 html의 poster 요소의 style=background-image: url({movie.Poster});의 image load가 완료 될 때 동작하는 걸까요? 만약 그렇다면 동일한 url 요청이 2번 발생(poster와 info내의 poster)하게 되는데 두 요청이 모두 완료될 때 트리거 되는 건가요? 네트워크 탭을 보면 실제 요청은 1번만 발생하는데 동작 구조가 궁금합니다. 그리고 이후 요청에 대해서는 disk cache로 동작하게 되는데 disk cache는 자동으로 캐싱되는 것인지도 궁금합니다!(자동 캐싱이라면 캐싱이 유지되는 조건이나 기본 값이 있는지도 궁금하네요) 고퀄리티 강의 올려주셔서 항상 감사드립니다!

HEROPY · Answer

네 이인우 님 안녕하세요.😉 같은 이미지는 한 번 로드하면 같은 사이트 안에서 어떻게(IMG 요소, background 속성 등) 사용하든지 새로 로드할 필요가 없습니다. 말씀하신 것과 같이 캐싱 되기 때문입니다. 최초 로드 후, 25~30ms 안에만 로드되면 사실상 캐싱 되었다고 판단할 수 있습니다. 그 외 브라우저 캐싱에 대한 내용은 다음 블로그를 참고하시면 좋을 듯합니다. 자세하고 친절하게 잘 설명하고 있습니다. https://medium.com/@codebyamir/a-web-developers-guide-to-browser-caching-cc41f3b73e7c