페이지를 다시 로드하지 않고도 동적으로 로드된 이미지가 업데이트되지 않는 이유는 무엇입니까?

문제 해결: 이미지가 동적으로 업데이트되지 않음

요청할 때마다 새 이미지를 제공하는 링크에 액세스하면 이미지가 로드되는 문제가 발생할 수 있습니다. 페이지를 새로고침하지 않으면 페이지에서 배경이 업데이트되지 않습니다.

아래 코드는 문제:

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

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

    setTimeout(updateImage, 1000);
}

이 시나리오에서는 요청 헤더에 캐싱이 비활성화되었다고 표시되어도 페이지에서 이미지가 업데이트되지 않습니다.

HTTP/1.x 200 OK
Cache-Control: no-cache, must-revalidate
Pragma: no-cache

해결책: Cachebreaker

이미지를 강제로 새로 고치려면 이미지 끝에 캐시 차단기를 추가하세요. URL:

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

현재 타임스탬프를 추가하면 브라우저가 캐시된 버전을 사용하는 대신 서버에서 이미지를 검색하게 됩니다. 이 기술을 사용하면 예상대로 페이지에서 이미지가 동적으로 업데이트될 수 있습니다.

위 내용은 페이지를 다시 로드하지 않고도 동적으로 로드된 이미지가 업데이트되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!