Question

问题：

当我调整窗口大小时，图像有时会发生变化。它几乎就像被卡住了一样，基金会没有正确捕捉调整大小事件。如果我像狂热的猴子一样开始调整窗口的大小，它偶尔会交换图像。如果我根据媒体查询调整窗口大小，然后刷新页面，则呈现正确的图像。这似乎只是一个调整大小的问题。

其他细节：

我只有一个常规的.html文件（在一台单独的机器上从IIS托管的新网站），只有一个简单的交换图像交换演示。
如果我手动拨打：$(document).foundation("interchange", "resize");，图片将正确切换。
基础版本5.3.1
在Chrome 36和Firefox 31中进行测试。
到目前为止，唯一有效的内置媒体查询是(default)。 (medium)，(large)等什么都不做，我必须写出实际的查询才能使它工作（或者使用named_queries手动创建它们。这可能是一个无关的问题，但对我来说似乎很奇怪。

<html>
<head>
    <title>Interchange</title>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>

    <script type='text/javascript' src='/foundation.js'></script>
    <script type='text/javascript' src='/foundation.interchange.js'></script>
    <link rel='stylesheet' href='/foundation.css' />
    <link rel='stylesheet' href='/normalize.css' />

    <script type='text/javascript'>
        $(function () {
            $(document).foundation();

            $(document).on('replace', function (e, newVal) {
                console.log(newVal);
            });

            // Adding this horrible hack will make it work 100% of the time.
            // BUT THIS SHOULD NOT BE NECESSARY!
            //$(window).resize(function(){
            //    $(document).foundation("interchange", "resize");
            //})
        });
    </script>

</head>
<body>
    <img data-interchange="[/images/space-small.jpg, (default)], [/images/space-medium.jpg, (only screen and (min-width: 641px))], [/images/space-large.jpg, (only screen and (min-width: 1000px))]">
</body>
</html>

Answer 1

我找到了自己问题的答案，确实是我在OP中描述的奇怪的media queries问题引起了我的问题。

Foundation的javascript依赖于初始化之前存在的Foundation CSS。

我所要做的就是确保CSS链接位于脚本包含之上，一切都按预期开始工作。

Answer 2

不确定这对任何人都有帮助，但我只是在Chrome上遇到了同样的问题。我将foundation.min.css添加到我的页面，就像b1j建议的那样，瞧！不幸的是，尽管我使用的是SASS版本，但我不能将其包含在页面中，因为我的页面中包含的css数量会增加一倍。所以我将foundation.css内容粘贴到文档头部的样式标记中并逐位删除其内容，直到找到修复它的css片段。这是：

meta.foundation-mq-small {
    font-family: "/only screen/";
    width: 0em; }

meta.foundation-mq-medium {
    font-family: "/only screen and (min-width:40.063em)/";
    width: 40.063em; }

meta.foundation-mq-large {
    font-family: "/only screen and (min-width:64.063em)/";
    width: 64.063em; }

meta.foundation-mq-xlarge {
    font-family: "/only screen and (min-width:90.063em)/";
    width: 90.063em; }

meta.foundation-mq-xxlarge {
    font-family: "/only screen and (min-width:120.063em)/";
    width: 120.063em; }

不确定为什么这个没有编译到我的CSS中但我会看，但是如果有人需要快速解决，这应该这样做！

基础交换图像交换无法正常工作

2 个答案: