不知道如何解决这个 javascript / image map / PHP 问题

Question

我正在尝试找出最好或最有效的方法。

我的网站是在服务器端用 PHP 编写的，带有 MySQL 数据库，在客户端使用 javascript 和 jQuery。

用户来到这个包含图像地图的特定页面（即map.php）。这张地图上有五个不同的可点击区域。每个区域都有一个图像队列，这些图像将沿着队列排列，在用户单击图像时按顺序加载每个图像。例如，如果您单击区域 A，则它可能会生成队列 A1.jpg、A2.jpg、A3.jpg、A4.jpg、map.jpg。首先它会加载图像 A1.jpg，当用户点击图像时，它会加载 A2.jpg 等。最后一个图像将它们返回到主地图。

当他们点击主地图上的五个区域之一时，javascript 会删除所有可点击区域并创建一个新区域，该区域是用户点击的整个图像。返回 map.jpg 也会重新添加五个图像地图区域。

让事情变得更复杂一些。 5 个区域中没有一个具有相同的队列，您可能不会一直返回相同的图像队列。

例如，当您第一次点击区域 A 时，您可能会经过 A1、A2、A3、A4 和地图。他们第二次返回 A 时，队列可能是 A3、A4、地图。通过查看外部页面（map.php 之外）的触发器可能会将下一个队列变为 A5、A3、A4 或 A6、A3、A4 或 A7、A3、A4。最终的图像队列可能是 A8、A9、A10、A11、A12、... A18。

并且图像映射区域B、C、D和E都可以有不同的图像队列。

现在我正在考虑如何做到这一点，但无论我如何尝试编写它，它似乎都过于复杂，必须有更好的方法。我想可能将每个可能的图像队列存储在数据库中，然后将每个用户的“状态”存储在 map.php 上。但是数据库状态可能需要更改，并且由于前端是 javascript，我不确定如何执行此操作。还有一个问题是预加载图像以尝试使它们尽可能平滑。

这就是为什么我在这里尝试并征求想法和意见，尝试并反复提出想法以帮助我想出更好的方法来做到这一点。

Answer 1

听起来你正在做一个谷歌地图克隆。

您可以尝试在会话中存储状态服务器端。当用户单击 A1 时，您会执行一个 ajax 请求，告诉服务器 A1 已被单击，并且服务器会以 A1 放大区域的图像列表进行响应。

这样，当用户单击缩小时，服务器可以根据之前单击的区域以适当的图像集进行响应。

您可以考虑将图像存储在分层数据库中。所以图像 A1 有一个 A 的父图像。您单击放大 A，执行查询以获取所有具有 A 父图像的图像，并为您提供新地图。

类似地，当您单击缩小时，您将 A 存储在会话中，因此您将获得与 A 具有相同父级的所有图像。

因此，您需要在会话中存储的只是队列单击的图像。放大时推入队列，缩小时弹出队列。

Answer 2

你说每个“队列”都可以随心所欲地改变。如果客户端正在遍历队列中途，客户端是否可以忽略更新并继续完成其当前队列？

客户端仍然可以知道最新的更新，但只有在完成遍历队列并返回地图时才应用更新。这有助于图像预加载。它可以开始在最新版本的队列中预加载图像，同时继续遍历其当前队列。