Zurb Foundation中的Interchange.js在PHP类动态调整图像大小时的问题

Question

我正在使用Zurb基金会建立一个响应式网站。

我有一个PHP脚本，它将调整大小和缓存图像使用gdlib，如果你追加一个查询字符串与新的维度在URL中。例如，要将图像大小调整为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保存它，并将其与标题一起输出(“Content-type: image/jpeg")；

我也在使用Zurb Foundation，并希望像这样使用interchange 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属性中的内容才是有效的。通过调整大小脚本传递的图像不起作用。这是正确的，即使它应该使用媒体图像，这是直接路径，全尺寸图像。

我试着调试interchange javascript，但对Javascript不是很熟练。

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

Answer 1

不需要调试interchange，它工作得很好。

首先，您是否在interchange.js之前包含了foudation.js文件(依赖项)？

调试技巧:尝试使用default/medium/small，并使用不同的图像(例如:不同颜色的矩形)以快速注意到更改。

此外，在您的示例中，只有一条路径(见下文)，并且您有一个“默认”名称-query。两次加载相同的图像有什么意义？您可能希望您的默认大小为src=""，然后您的(通常)更大的大小？

interchange所做的是让src“(例如: 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)]">

Answer 2

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