相同 URL 的旋转图像在不刷新的情况下不会更新答案

【问题标题】：Rotating image of same URL does not update without refresh相同 URL 的旋转图像在不刷新的情况下不会更新
【发布时间】：2020-01-26 23:49:42
【问题描述】：

我正在使用下面的代码来旋转 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();
});

【问题讨论】：

您的意思是第一张图片会在用户加载页面后刷新？你想继续显示最新的图像吗？您可以添加另一个间隔并在里面运行类似document.querySelector("#rotating-item-wrapper img").src = "/absolute/path/image1.png?" + Math.random(); 的内容。
@ChrisG 感谢您的回复。该页面仅加载一次并停留在用户屏幕上。图像旋转脚本将正确循环所有三个图像（就像现在一样），但 image1.png 可能在服务器上已更改，我需要它来获取新的 image1.png（无需刷新页面）。
@ChrisG感谢您的编辑和更多信息。我不知道如何在 javascript 中做到这一点，我可以做 PHP 但根本不知道 javascript，冷你进一步帮助？谢谢。

标签： javascript php html

【解决方案1】：

您可以在 JavaScript 中使用相同的查询字符串“cache-busting”技巧。您只需要创建一个新的图像对象并将其指定为图像的来源，并附加一个随机查询字符串值：

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

这将导致浏览器重新获取该图像。然后，您可以替换现有图像或将其添加到页面某处，例如：

document.body.appendChild(newImage);

【讨论】：

【解决方案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>

【讨论】：