当 PHP 类动态调整图像大小时，Zurb Foundation 中的 Interchange.js 出现问题答案

【问题标题】：Trouble with Interchange.js in Zurb Foundation when images are being dynamically resized by PHP class当 PHP 类动态调整图像大小时，Zurb Foundation 中的 Interchange.js 出现问题
【发布时间】：2013-07-27 00:46:30
【问题描述】：

我正在使用 Zurb Foundation 构建一个响应式网站。

我有一个 PHP 脚本，如果您在 URL 中附加一个带有新维度的查询字符串，它将使用 gdlib 调整和缓存图像的大小。例如将图像调整为 300px 宽：

http://www.mydomain.com/images.php?imgfile=path/to/picture1.jpg&w=300

我还使用了一些 HTACCESS 重写规则来使这个 URL 更漂亮并避免出现查询字符串。所以这个 URL 给出了和上面一样的结果：

http://www.mydomain.com/img/300w/path/to/picture1.jpg

PHP 文件执行一些简单的算法来限制宽度或高度，检查调整大小的版本是否已经在缓存中，如果是则输出它，如果没有，调整图像大小，使用 imagejpeg 保存并使用 header("内容类型：image/jpeg");

我也在使用 Zurb Foundation，并希望像这样使用交换 javascript：

<img src="http://www.mydomain.com/img/300w/path/to/picture1.jpg" 
data-interchange="[http://www.mydomain.com/img/300w/path/to/picture1.jpg, (default)],
[http://www.mydomain.com/path/to/picture1.jpg, (medium)]">

但是，这似乎不起作用。两个断点只显示 300px。经过大量测试，很明显只有 src 属性中的内容才被占用。通过调整大小脚本的图像不起作用。即使它应该使用作为全尺寸图像的直接路径的中等图像也是如此。

我尝试调试交换 javascript，但对 Javascript 不太熟练。

任何帮助或建议将不胜感激。一定有人试图在响应式站点上使用interchange.js 使用PHP 动态调整大小的图像。

【问题讨论】：

我发现与基础 4 的交换不适用于 .jpeg 但与 .jpg 可能需要检查。

标签： php javascript responsive-design zurb-foundation data-interchange

【解决方案1】：

无需调试交换，效果很好。

首先，你是否在interchange.js（依赖）之前包含了foudation.js文件？

调试提示：尝试使用默认/中/小并使用不同的图像（例如：不同颜色的矩形）来快速发现变化。

此外，在您的示例中，只有一个路径（见下文），并且您有一个“默认”命名查询。两次加载相同的图像有什么意义？您可能希望您的默认尺寸为 src=""，然后（通常）更大的尺寸？

交换的作用是让 src"(ex: small.jpg)" 像往常一样加载（因此它在没有启用 js 的情况下显示）然后根据命名查询/媒体查询加载更大的图像。因此，也许您可以在上传时生成所有图像大小（无需检查大小是否存在）。至少，这是我使用 wordpress 的方式。

<img src="http://www.mydomain.com/img/default-size/300w/path/to/picture1-small.jpg"
data-interchange="[http://www.mydomain.com/img/medium-size/800w/path/to/picture1-medium-sized.jpg, (medium)],
[http://www.mydomain.com/img/large-size/1200w/path/to/picture1-large-sized.jpg, (large)]">

【讨论】：

【解决方案2】：

正如我在Zurb Foundation Github repo Issues 上看到的那样，包含参数及其正则表达式的 url 可能存在问题

【讨论】：