Question

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

足够简单，有一百万个教程如何做到这一点。

属性变得不那么重要。我希望能够根据前面提到的属性交换图像。

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

第二，如果有人点击“尺寸：大”，它会显示为尺寸设置的图像。

第三次，如果有人点击“颜色：红色”，它会拉出“大：红”图像并将其换成主图像。

第四，如果有人点击“尺寸：小”，则会获取“小：红色”图像文件。

第五，如果有人点击“颜色：蓝色”，则会获取“小：蓝色”图片文件。

你明白了。

我有一个大小为：color table的数据库。问题是，在HTML页面中获取此数据的最佳方法是什么，以便将其加载到JavaScript中？

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

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

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

有关人们如何最好地存储HTML文件中的数据以使用JavaScript访问以构建一些不错的页面体验效果的想法吗？

----编辑----

睡着了，我想我已经在思考这一切。这整个时间我都试图弄清楚如何将所有这些产品图像信息添加到HTML中，以便JavaScript可以使用它添加效果，当我认为我需要做的只是让我的PHP吐出图像/属性表为一个JavaScript对象，所以我可以使用它。而不是试图找出从HTML重新加载它的方法。这只是思考整个问题。

Answer 1

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

或者你可以聪明地使用类名并将数据放在那里：red_A12345将解析为 red image =“A12345.jpg”

Answer 2

查看我编辑的评论 -

我发现通过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表单，该表单将根据当前输入启用/禁用表单选项，以及是否有任何结果可用于将来的选项，根据当前选择的选项。

图像交换，数据隐藏，JavaScript和SEO

2 个答案: