不知道如何去這個JavaScript /圖像映射/ 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中，我不知道如何做到這一點。還有預加載圖像的問題，儘量讓它們儘可能平滑。

這就是爲什麼我在這裏試圖尋求想法和opions，嘗試和反彈的想法，以幫助我想到一個更好的方式來做到這一點。

Answer 1

聽起來像你正在做一個谷歌地圖克隆。

您可以嘗試將狀態服務器端存儲在會話中。當用戶點擊A1時，會發出ajax請求，告訴服務器A1已被點擊，並且服務器以A1的放大區域的圖像列表作爲響應。

這種方式當用戶點擊縮小時，服務器可以基於之前點擊的區域以適當的圖像集合進行響應。

您可能會考慮將圖像存儲在分層數據庫中。所以圖像A1有一個A的父圖像。你點擊A上的縮放，做一個查詢來獲得所有具有A的父親並且給你新地圖的圖像。

同樣，當您單擊縮小，你有一個保存在session，所以你得到所有誰具有相同的父爲A.圖像

因此，所有你需要在會​​話存儲是點擊一個隊列圖片。當您放大時，您會推入隊列，縮小時彈出隊列。

Answer 2

你說每個「隊列」都可以隨意改變。如果客戶端正在遍歷隊列的一半，客戶端只會表現出對更新無知，並繼續完成當前隊列，是否可以接受？

客戶端仍然可以知道最新的更新，但只有在遍歷隊列並返回到地圖時才應用更新。這有利於圖像預加載。它可以開始在最新版本的隊列中預加載圖像，同時繼續遍歷其當前隊列。