2

我正在使用 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("Content-type : 图像/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

2 回答 2

2

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

首先，您是否在 exchange.js (dependancy) 之前包含了 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)]">
于 2013-10-03T07:47:22.693 回答
1

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

于 2013-12-17T14:37:58.797 回答