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