获取并查看图像 html

Question

我有下面的代码，可以从目录中获取图像并显示在 HTML 中。该目录中的图像每秒不断变化。它在桌面浏览器上有点工作，但我不能让它在移动浏览器上工作。它似乎总是在读取缓存的图像而不是从服务器重新加载。它可以通过在桌面浏览器上按 ctrl+F5 来工作，但不能在移动浏览器上工作。有没有办法通过 JavaScript 硬刷新移动浏览器 (chrome)？

<html>
<head>
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Expires" content="-1">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
 <img id="viewer" src="" width="100%"/>
 <div id="info"> </div>
 <button id="btnLeft" type="button">Left</button>
 <button id="btnRight" type="button">Right</button>
 <input type="button" value="Refresh page" onclick="location.reload(true);" />

<script>
$(function() {
 var baseUrl = "./Cam01/";
 var pictureIndex = 0;
 var pictures = [];
 function getFiles() {
  $.ajax(baseUrl).success(function(data) {
   pictures = [];
   $(data).find("a[href]").each(function() {
    var href = $(this).attr('href');
    if (href.indexOf('.jpg') > 0 || href.indexOf('.png') > 0 || href.indexOf('.jpeg') > 0) {
     pictures.push(href);
    }
   });
   console.log(pictures.length + " pictures loaded!");
   changePicture(0);
  });
 }
 function changePicture(indexOffset) {
  pictureIndex += indexOffset;
  if (pictureIndex >= pictures.length) {
   pictureIndex = 0;
  } else if (pictureIndex < 0) {
   pictureIndex = pictures.length - 1;
  }
  $('#viewer').attr('src', baseUrl + pictures[pictureIndex]);
  $('#info').text((pictureIndex + 1) + "/" + pictures.length);
 }

 getFiles();
 
 $('#btnLeft').click(function() {
 var left = -1;
    changePicture(left); return false;
 });
 $('#btnRight').click(function() {
 var right = 1;
    changePicture(right); return false;
 });
 
 $(document).keydown(function(e){
  var left = -1, right = 1;
     if (e.keyCode == 37) {
        changePicture(left); return false;
     } else if (e.keyCode == 39) {
      changePicture(right); return false;
     }
 });
 
});
</script>
</body>
</html>

Answer 1

防止从缓存加载图像的一种方法是在其 URL.
后附加时间戳这会导致资源看起来 "fresh" 因为它与上次加载时不同。

我更喜欢使用 "file modified" 时间戳，这样只有自上次加载以来发生变化的图像才会被刷新。未更改的图像可以从缓存中加载。但是，您似乎正在解析目录索引页，并且您无法使用该时间戳。

您可以将 current timestamp 附加到 URL 以防止缓存。但正如@Ajaypayne 所暗示的，这可能会导致不必要的高带宽使用，因为即使图像没有改变，它也会阻止缓存。

像这样：

var href = $(this).attr('href') + '?'+Date.now();

编辑

实际上，由于图像是在按下按钮时加载的，所以我会在 changePicture() 函数中添加时间戳，而不是在页面加载时添加：

$('#viewer').attr('src', baseUrl + pictures[pictureIndex] + '?'+Date.now());

编辑

顺便说一下，jQuery 的 .ajax() 函数接受 cache 参数用于 GET 请求：

cache (default: true, false for dataType 'script' and 'jsonp')
Type: Boolean
If set to false, it will force requested pages not to be cached by the browser. Note: Setting cache to false will only work correctly with HEAD and GET requests. It works by appending "_={timestamp}" to the GET parameters. The parameter is not needed for other types of requests, except in IE8 when a POST is made to a URL that has already been requested by a GET.

所以也许：

$.ajax({
  url: baseUrl,
  method: "GET",
  cache: false
}).done(function(data) {
  // process data here
});

获取并查看图像 html

Fetch and view images html

javascript

android

html

image

viewer

编辑

编辑