>웹 프론트엔드 >JS 튜토리얼 >브라우저 캐싱 없이 동일한 URL에서 이미지를 동적으로 새로 고치는 방법은 무엇입니까?

브라우저 캐싱 없이 동일한 URL에서 이미지를 동적으로 새로 고치는 방법은 무엇입니까?

Patricia Arquette
Patricia Arquette원래의
2024-12-18 03:29:09133검색

How to Dynamically Refresh an Image from the Same URL Without Browser Caching?

동일한 URL에서 이미지를 동적으로 새로 고치는 방법

사이트의 이미지가 링크를 통해 액세스되어 새로 고쳐지는 문제가 있습니다. 링크에 액세스할 때마다 새로운 이미지가 표시됩니다. 그러나 백그라운드에서 이미지를 로드하고 페이지에서 업데이트하려고 하면 페이지를 다시 로드할 때 새로 고쳐지더라도 변경되지 않은 상태로 유지됩니다.

문제는 브라우저 캐싱에 있습니다. 기본적으로 브라우저는 로딩 시간을 개선하기 위해 이미지를 캐시합니다. 따라서 이미지를 업데이트하려고 하면 브라우저는 새 이미지를 가져오는 대신 캐시된 버전만 표시합니다.

해결책: 캐시브레이커 사용

브라우저를 강제로 사용하려면 최신 이미지를 다운로드하려면 이미지 URL에 캐시브레이커를 추가하면 됩니다. 이는 일반적으로 현재 타임스탬프를 추가하여 브라우저가 요청을 고유한 URL로 인식하도록 합니다.

JavaScript 코드에서:

newImage.src = "http://localhost/image.jpg?" + new Date().getTime();

이 캐시 차단기를 추가하면 브라우저가 강제로 캐시를 효과적으로 우회하여 서버에서 직접 이미지를 검색합니다. 이렇게 하면 페이지에 항상 최신 버전의 이미지가 표시됩니다.

위 내용은 브라우저 캐싱 없이 동일한 URL에서 이미지를 동적으로 새로 고치는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.