相同 URL 的旋轉圖像不會在不刷新的情況下更新

Question

我正在使用下面的代碼來旋轉 3 張正常工作的圖像。

我遇到的問題是 image1.png 經常更改，瀏覽器不會刷新圖像。 刷新頁面不是一種選擇。

我知道我可以在文件名的末尾添加一個時間變量，例如image1.png?41234134 （例如），但是如何在不刷新頁面的情況下執行此操作？ （我熟悉 PHP，可以在頁面加載時獲得新的時間戳，但我不確定如何在 Javascript 或 jquery 中執行此操作而不重新加載頁面以獲取新值）。

<?php
echo ' 
<div id="rotating-item-wrapper">
    <img style="position: absolute; top: 0; right: 0;" width="480" height="480" src="' . $absolute_path . '/image1.png" class="rotating-item" />
    <img style="position: absolute; top: 0; right: 0;" width="480" height="480" src="' . $absolute_path . '/image2.png" class="rotating-item" />
    <img style="position: absolute; top: 0; right: 0;" width="480" height="480" src="' . $absolute_path . '/screen_600x600.png" class="rotating-item" />
</div>';
?>

該頁面還加載了一些 Javascript 來進行圖像旋轉：

$(window).load(function() { 
    var InfiniteRotator = 
    {
        init: function()
        {
            var initialFadeIn = 1000;
            var itemInterval = 10000;
            var fadeTime = 1000;
            var numberOfItems = $('.rotating-item').length;
            var currentItem = 0;
            $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);

            var infiniteLoop = setInterval(function(){
                $('.rotating-item').eq(currentItem).fadeOut(fadeTime);

                if(currentItem == numberOfItems -1){
                    currentItem = 0;
                }else{
                    currentItem++;
                }
                $('.rotating-item').eq(currentItem).fadeIn(fadeTime);
            }, itemInterval);   
        }   
    };
    InfiniteRotator.init();
});

Answer 1

您可以在 JavaScript 中使用相同的查詢字符串“緩存破壞”技巧。 您只需要創建一個新的圖像對象並將其分配給您的圖像源，並附加一個隨機查詢字符串值：

var newImage = new Image(300, 300);
var randomVal = Math.floor((Math.random() * 100000000));
newImage.src = `picture.jpg?${randomVal}`;

這將導致瀏覽器重新獲取該圖像。 然后，您可以替換現有圖像或將其添加到頁面某處，例如：

document.body.appendChild(newImage);

Answer 2

像@ChrisG 和其他人的建議一樣，將隨機查詢字段附加到圖像應該可以重新加載圖像而不是從緩存中加載。 我通過將相關圖像名稱存儲到數組中並在淡入/淡出循環之間插入了一個預加載器來修改您的代碼。

 var absolute_path = '<?php echo $absolute_path; ?>'; var images = ["image1.png", "image2.png", "screen_600x600.png"]; $(document).ready(function() { // init image src for (var i = 0; i < images.length; i++) { $('.image-holder').eq(i).attr("src", absolute_path + "/" + images[i] + "?" + (new Date().getTime())); } // the rest var InfiniteRotator = { init: function() { var initialFadeIn = 1000; var itemInterval = 10000; var fadeTime = 1000; var numberOfItems = $('.rotating-item').length; var currentItem = 0; $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn); var infiniteLoop = setInterval(function() { $('.rotating-item').eq(currentItem).fadeOut(fadeTime); if (currentItem == numberOfItems - 1) { currentItem = 0; } else { currentItem++; } $('.rotating-item').eq(currentItem).fadeIn(fadeTime); // prefetch next image var prefetchItem = (currentItem + 1) % numberOfItems; $('.rotating-item').eq(prefetchItem).attr("src", absolute_path + "/" + images[prefetchItem] + "?" + (new Date().getTime())); }, itemInterval); } }; InfiniteRotator.init(); });

 .image-holder { position: absolute; top: 0; right: 0; width: 480px; height: 480px; }

 <div id="rotating-item-wrapper"> <img class="image-holder rotating-item" /> <img class="image-holder rotating-item" /> <img class="image-holder rotating-item" /> </div>