Question

我有一个互联网广播电台，我需要一个脚本来显示带有ID的特定dvi中当前歌曲的图片。每当歌曲更改时，图像都会通过ftp自动上传到服务器。

HTML：

<div id="auto"></div>

JS：

  $ (document).ready(function() {
    $('#auto').html('<img src="artwork.png"></img>');
    refresh();
  });

  function refresh() {
    setTimeout (function() {
      $('#auto').html('<img src="artwork.png"></img>');
      refresh();
    }, 1000);
  }

我尝试过此操作，但是我得到的只是图像已加载，但是如果发生更改，我必须再次手动刷新整个页面。

Answer 1

我会在这里指出很多事情。

我认为，如果您要进行setTimeout递归调用而不是执行一次setInterval重复操作，那么您的代码就可以了。

文件缓存

您的问题可能是浏览器的缓存，因为您一直使用相同的映像名称和目录。浏览器比较文件名和目录，并决定从其缓存中加载它，否则它将从服务器请求它。在这种特殊情况下，您可以使用多种技巧从服务器重新加载图像。

为动态加载的歌曲使用不同的文件名/目录
使用随机GET查询（例如image.png?v=current timestamp）

您的切换方法

您正在用FTP替换文件，我不建议这样做。也许您应该将所有相册和缩略图都上传到服务器，并使用不同的动态切换来提高效率和减少错误发生的可能性，这将帮助您更好地实现上一节中的方法1。

不断刷新加载

我想强调一点，如果您使用基于事件的nodeJs或nginx服务器，则可以用更少的流量实现相同的功能。您不需要刷新方法，因为这些服务器实际上可以将有关特定事件的数据发送到浏览器，以告知它当时加载特定资源。不需要持续刷新。

您考虑了您的选择，我尽力做到尽可能全面

Answer 2

在顶级，浏览器根据图像的绝对URL缓存图像。您可以在URL上添加额外的查询，以欺骗浏览器，这是另一个新图像。在这种情况下，artist.png的新URL将是artist.png?timestamp=123

检查一下是否为refresh（）：

function refresh() {
  setTimeout (function() {
      var timestamp = new Date().getTime();
      // reassign the url to be like artwork.png?timestamp=456784512 based on timestmap
      $('#auto').html('<img src="artwork.png?timestamp='+ timestamp +'"></img>');
        refresh();
      }, 1000);
  }

您可以为图像分配id属性，并更改其src网址

html

<img id="myArtworkId" src="artwork.png"/>

js在刷新方法中

  $('#myArtworkId').attr('src', 'artwork.png?timestamp=' + new Date().getTime());

Answer 3

您可以使用window.setInterval()每x秒调用一个方法，并使用clearInterval()停止调用该方法。查看this答案以获取更多信息。

// Array containing src for demo
$srcs = ['https://www.petmd.com/sites/default/files/Acute-Dog-Diarrhea-47066074.jpg',
    'https://www.catster.com/wp-content/uploads/2018/05/Sad-cat-black-and-white-looking-out-the-window.jpg',
    'https://img.buzzfeed.com/buzzfeed-static/static/2017-05/17/13/asset/buzzfeed-prod-fastlane-03/sub-buzz-25320-1495040572-8.jpg?downsize=700:*&output-format=auto&output-quality=auto'
]
$i = 0;

$(document).ready(function() {
    $('#auto').html('<img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"></img>');

    // call method after every 2 seconds
    window.setInterval(function() {
        refresh();
    }, 2000);

    // To stop the calling of refresh method uncomment the line below
    //clearInterval() 

});



function refresh() {
    $('#auto').html('<img src="' + $srcs[$i++] + '"></img>');

    // Handling of index out of bound exception
    if ($srcs.length == $i) {
        $i = 0;
    }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="auto"></div>

自动刷新特定的div并使用jquery / ajax加载图像

3 个答案: