我目前正在开发一个独立的幻灯片应用程序，它显示 CSS 动画图像和音乐。
直到今天，图像和音乐都是直接从它们的真实位置加载的——这意味着这个位置和文件必须完全可供公众访问，任何人都可以直接打开图像和歌曲，而无需使用我的应用程序。这对于原型设计和发布来说很好 - 但现在需要更先进的防盗保护。
不要误会我的意思：我知道，没有真正的保护。我只是想让人们在直接下载方面遇到困难。应该没有办法直接链接到媒体文件。
这是我想出的：
图像和歌曲通过 PHP 加载- 您指定 id 作为参数，PHP 查找位置并提供文件（如果找到）。此外，仅当作为参数提供的 nonce 有效（存在且不超过 30 秒）时才提供文件。nonce 由 PHP 生成并存储在
$_SESSION['nonce']变量中。<img src="image/imageid?nonce=[[nonce]]">
<audio><source src="song/songid?nonce=[[nonce]]"></audio>在我的应用程序中，我具有三个功能：
(string) generateNone()用于生成、保存会话和返回 nonce 值 -> 用于标记以生成链接(bool) validateNonce()用于检查 nonce 是否有效并在之后将其删除以使其无法重复使用(void) initNonces()从会话中删除所有随机数。每次应用加载（当然不包括图像和歌曲服务）时都会调用此函数，以防止积累未使用的随机数。
问题：
从理论上讲，这整个想法是有效的。实际上，我遇到了两个我无法解决的问题：
图像似乎被浏览器重新加载：当使用 jQuery/JavaScript 更改图像时（例如“隐藏图像 1，显示图像 2”或“隐藏图像 4，显示图像 5”），图像无法加载，因为 nonce 不是不再有效（= 已经使用过一次）。验证后停止 nonce-deletion（= nonce 可重用）解决了这个问题，但这不是真正的解决方案。这个问题可能与问题 2 有关，因为 jQuery 仅更改 CSS 属性以显示和隐藏图像。
图像和歌曲在 nonce 生命周期后加载：浏览器似乎加载最初被 CSS 隐藏的图像，只有当图像变得可见时。虽然这通常有助于减少带宽使用，但在我的场景中，它会阻止图像和歌曲在 30 秒的 nonce 生命周期后加载。我需要一种方法让浏览器直接加载所有内容，或者至少在 30 秒的时间内打开并保持与请求的图像/歌曲的连接。
问题：
很难确定真正的问题，所以我希望知道浏览器内部如何处理媒体加载的人可以给我一个关于如何解决所描述问题的提示。如果您需要任何代码，请告诉我。