获取和查看图像 html答案

【问题标题】：Fetch and view images html获取和查看图像 html
【发布时间】：2018-08-17 04:29:54
【问题描述】：

我有下面的代码，它从目录中获取图像并以 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>

【问题讨论】：

为什么要强制移动用户不断加载更多数据？
在图像定期更改的项目中，我喜欢将“文件修改”时间戳附加到 URL。见Cache busting via params。
@Ajaypayne，它只是个人项目使用的远程图像查看器。数据使用不是一个问题。
好的，那么为了确保您始终拥有最新的而不是缓存，您应该查看@showdev 的评论
@showdev，我查看了您的链接，但不确定如何实现。

标签： javascript android html image viewer

【解决方案1】：

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

我更喜欢使用“文件修改”时间戳，以便仅刷新自上次加载以来已更改的图像。未更改的图像可以从缓存中加载。但是，您似乎正在解析目录索引页面，并且您无法使用该时间戳。

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

类似这样的：

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

编辑

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

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

编辑

顺便提一下，jQuery 的 .ajax() 函数接受 cache 参数来处理 GET 请求：

缓存（默认：true, false for dataType 'script' and 'jsonp'）
类型：布尔值
如果设置为false，它将强制浏览器不缓存请求的页面。 注意： 将 cache 设置为 false 仅适用于 HEAD 和 GET 请求。它通过将“_={timestamp}”附加到 GET 参数来工作。其他类型的请求不需要该参数，除非在 IE8 中对已由 GET 请求的 URL 进行 POST。

所以也许：

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

【讨论】：

这似乎对缓存图像有效。当我反复测试时，似乎主要问题是图像的索引。假设我现在有 5 张图像，一分钟后我有 10 张，索引方法没有更新为当前。
嗯，我明白了。也许目录列表本身被缓存了？如果将时间戳附加到 baseUrl 会发生什么？
您可能还想尝试 jQuery 的 cache 参数 .ajax()。它使用类似的方法来添加时间戳。请参阅编辑。
我在缓存基础文档方面采取了不同的方式。我使用 .htaccess 来更新索引，缺点是它会影响我服务器中的所有 .html。有没有办法只针对特定目录？
我认为您可以将 .htaccess 文件放在您希望它影响的目录中。