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

Mark • 5 年前 • 1535 次点击

我有一个互联网电台,我需要一个脚本,将显示当前歌曲的图片,在一个特定的dvi与一个id。图像是通过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);
  }

我试过了,但得到的结果是图像已加载,但如果发生更改,我必须再次手动刷新整个页面。

Python社区是高质量的Python/Django开发社区
本文地址：http://www.python88.com/topic/47524

1535 次点击

文章 [ 3 ] | 最新文章 5 年前

• 1 楼

Javapocalypse 6 年前

你可以用 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>

• 2 楼

Ponleu 6 年前

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

查看此以获取刷新():

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());

• 3 楼

CME64 6 年前

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

我觉得你的代码没问题 setTimeout 递归调用而不是一个 setInterval 重复它的动作。

文件缓存

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

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

你的转换方法

你用ftp替换文件,我不建议这样做。也许你应该把所有的相册和缩略图上传到服务器上,并使用不同的动态切换以提高效率和减少错误倾向,这将帮助你更好地实现上一节中的方法1。

不断刷新加载

我想强调的是,如果您使用的是基于事件的nodejs或nginx服务器,您可以用更少的流量实现相同的功能。您不需要刷新方法,因为这些服务器实际上可以将特定事件的数据发送到浏览器,告诉它在此时加载特定资源。此操作不需要持续刷新。

你考虑过你的选择,我尽量做到全面

登录后回复