URL에서 이미지를 동적으로 표시하고 브라우저 캐싱을 피하는 방법은 무엇입니까?

URL이 캐시된 동적 이미지 표시

특정 URL에서 이미지를 검색하여 액세스할 때마다 고유한 이미지가 생성되도록 하는 시나리오를 생각해 보세요. 영상. 그러나 페이지의 이미지를 업데이트하려고 하면 페이지를 다시 로드하지 않는 한 이미지는 변경되지 않은 상태로 유지됩니다.

이미지 표시용 JavaScript 코드

다음 JavaScript 코드는 이미지 표시 및 새로 고침 메커니즘:

var newImage = new Image();
newImage.src = "http://localhost/image.jpg";

function updateImage() {
  if (newImage.complete) {
    document.getElementById("theText").src = newImage.src;
    newImage = new Image();
    newImage.src = "http://localhost/image/id/image.jpg?time=" + new Date();
  }

  setTimeout(updateImage, 1000);
}

주어진 시나리오에서는 브라우저가 이미지를 캐시할 가능성으로 인해 이미지가 업데이트되지 않습니다. 지정된 URL의 이미지. 이렇게 하면 브라우저가 최신 이미지 버전을 가져오는 것을 방지할 수 있습니다.

캐시 문제 극복

이미지를 강제로 새로 고치려면 URL에 캐시 브레이커. 이렇게 하면 브라우저가 캐시된 버전에 의존하지 않고 서버에서 직접 이미지를 가져옵니다. 수정된 코드에는 다음이 포함됩니다.

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

이를 추가하면 이미지가 생성될 때마다 현재 타임스탬프가 URL에 추가됩니다. 결과적으로 브라우저는 캐시된 버전에 액세스하는 대신 서버에서 이미지를 검색합니다. 이 캐시브레이커를 추가하면 페이지의 이미지가 서버에서 제공하는 최신 버전을 반영하여 동적으로 업데이트됩니다.

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