為什麼我的動態載入圖片在不重新載入頁面的情況下無法更新？

疑難排解：圖片未動態更新

造訪每次要求時提供新圖片的連結時，您可能會遇到圖片載入到除非您重新載入頁面，否則頁面上的背景無法更新。

下面的程式碼說明了問題：

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中文網其他相關文章！