图像交换、数据隐藏、javascript和SEO

我正在制作一个产品网页。此产品页面具有多个属性，例如大小和颜色。我正在构建一个图像交换脚本（jQuery），它将根据事件交换页面上的主图像

这很简单，有一百万个教程介绍如何做到这一点

这变得不那么琐碎的地方是属性。我希望能够交换基于上述属性选择的图像

首先，页面将显示一个已设置为给定产品“默认”的图像

秒，如果有人单击“大小：大”，它将显示设置为“大”的图像

第三个，如果有人单击“颜色：红色”，它将拉出“大：红色”图像，并将其替换为主图像

第四个，如果有人现在单击“size:small”，它将获取“small:red”图像文件

Fifth，如果有人现在单击“color:blue”，它将获取“small:blue”图像文件

你明白了

我有一个数据库的大小：颜色表。问题是，在HTML页面中获取这些数据以便将其加载到JavaScript中的最佳方法是什么

我想避免AJAX调用，因为额外的网络开销和页面加载已经访问了数据库并收集了所有数据，我不想再次调用数据库并让它再次完成所有工作

我可以用CSS（display:none）将数据隐藏在喜欢的元素中，但我会关注SEO。有一些数据需要隐藏。有缩略图的网址，标准大小和大尺寸。我当然不想将其保存为那样的JSON格式，只显示：无

我想也许可以将其保存在HTML注释中并使用jQuery comments（）插件。我担心速度和可行性

关于人们如何最好地将数据存储在HTML文件中，以便使用JavaScript访问以构建一些良好的页面体验效果，有什么想法吗

----编辑----

---

在这件事上睡了一觉之后，我想我对这件事想得太多了。这段时间我一直在想如何将所有这些产品图像信息添加到HTML中，以便JavaScript可以使用它添加效果，而我想我需要做的只是让我的PHP将图像/属性表作为JavaScript对象输出，以便我可以使用它。而不是想办法从HTML中重新加载它。这只是想得太多了。

您可以使用包含JSON格式的产品数据的JavaScript块弹出页面

---

或者，您可以巧妙地使用类名并将数据放入其中：

red\u A12345

将解析为red image=“A12345.jpg”

请参见我编辑的注释-

我发现通过PHP创建一个JS变量/对象可以很好地将数据传递给JS，这样我就可以创建一个JS应用程序，实现上述的图像交换复杂性

我使用Zend和jQuery作为PHP/JS框架，因此代码示例将反映这一点。但该概念适用于任何开发平台：

// parse the object into Json in PHP to pass to JavaScript, using Zend_Json
$jsonSource = Zend_Json::encode($dataObject);

// parse the Json in jQuery as a JavaScript script
$script = 'var imgTable = jQuery.parseJSON(\'' . $jsonSource . '\');';

// append the script to my Zend_Framework template so it prints out
$this->view->headScript()->appendScript($script, $type);

---

此外，我认为我将研究这样做的实用性，以构建一个动态复选框web表单，该表单将根据当前输入启用/禁用表单选项，并且根据当前选择的选项，如果有任何结果可用于未来选项。

实际上，这是我通常做的，但由于数据集中有太多变量，类名就不起作用了。部分原因是需要对字符串进行标记以适应其中的所有数据，并且必须有多个与该字符串关联的类名，因此在这种情况下似乎并不实用。我已经实现了PHP，添加了一个数据的JavaScript变量，效果非常好，我认为对于更重的数据集可能还有一些其他用途。