Question

目前正在Chrome中发生这种情况，在Firefox中我还没有遇到过这个问题。

这是我的问题的非常简化的版本。

HTML：

<div class="thumbnail">
  <a href='#' id="clickMe">Click me!</a>
</div>

CSS：

div {
    width: 200px;
    height: 300px;
    background-color: purple;
}
a {
    position: absolute;
}
@media (max-width: 991px) {
    div {
        height: 200px;
    }
}

使用Javascript：

$(document).ready(function () {
    var $parent = $('#clickMe').parent();
    function resize() {
        $('#clickMe').offset({
            top: $parent.offset().top + $parent.height()-$('#clickMe').height()
        });
    }
    $(window).on('resize', resize);
    resize();
});

问题：

那么当我调整大小（没有拖动）时会给出什么？好javascript首先启动并设置<a></a>的位置，然后CSS应用高度变化，如果我们＆lt; 992 px。

逻辑上，按钮现在在视觉上位于div的外部，而不是像我最初定义的那样在边框上。

此帖中提出的临时解决方案。

jQuery - how to wait for the 'end' of 'resize' event and only then perform an action?

var doit;
    $(window).on('resize', function(){ clearTimeout(doit); doit = setTimeout(resize, 500); });

临时解决方案不是我想要的：

然而，在我的情况下，我真的不需要在调整大小事件实际完成时调用'resize'。我只是希望我的 javascript在css完成加载之后运行/或者完成它的更改。当使用 css <时，使用该函数'randomely'运行JS时感觉超级慢/ strong>可能已经完成。

问题：

有解决方案吗？任何人都知道js中的技术要等到css完全完成在调整大小期间应用修改吗？

其他信息：

在jsfiddle中测试这个很可能不会给你与我相同的结果。我的css文件有很多行，我使用的是Twitter Bootstrap。这两个占用了很多资源，放慢了css应用程序的速度（我想，如果我错了就告诉我）。

MiljanPuzović--通过js加载css文件提出了一个解决方案，然后在css上的js事件结束时应用js更改。

Answer 1

我认为这些简单的三个步骤将实现预期的行为（请仔细阅读：我还建议阅读更多有关上述属性的内容，以深入了解其工作原理）：

响应式和流畅的布局问题应始终主要（如果不是通过scrictly）使用CSS解决。

因此，请删除所有JavaScript代码。
您已完全定位内部a#clickMe元素。

这意味着它将位于其最近的相对定位元素内。根据提供的样式，它将位于body元素中，因为任何其他元素中没有position: relative;（默认position值为static） 。通过提供的脚本，它似乎应位于其直接父容器中。为此，请将position: relative;添加到div.thumbnail元素。
根据您提供的脚本，您似乎需要将a#clickMe放在div.thumbnail的底部。

既然我们确定添加到a#clickMe的样式与div.thumbnail相关，只需将bottom: 0px;添加到a#clickMe元素，它就会相应地定位，其父母的身高。请注意，当窗口调整大小时（不需要脚本），这将自动重新排列。

最终代码将是这样的（see fiddle here）：

<强> JS：

 /* No script needed. */

<强> CSS：

div {
    width: 200px;
    height: 300px;
    background-color: purple;
    position: relative; //added
}
a {
    position: absolute;
    bottom: 0px; //added
}
@media (max-width: 991px) {
    div {
        height: 200px;
    }
}

如果您仍然坚持媒体查询更改检测，请参阅以下链接：

http://css-tricks.com/media-query-change-detection-in-javascript-through-css-animations/

http://css-tricks.com/enquire-js-media-query-callbacks-in-javascript/

http://tylergaw.com/articles/reacting-to-media-queries-in-javascript

http://davidwalsh.name/device-state-detection-css-media-queries-javascript

Twitter Bootstrap - how to detect when media queries starts

Bootstrap: Responsitive design - execute JS when window is resized from 980px to 979px

Answer 2

我喜欢你的临时解决方案（我之前为类似的问题做过这样的事情，我认为半秒太长时间不能让用户等待，但也许这是出于你的需要......）。

这是您最有可能想到的另一种选择，但我不会在这里提到它。为什么不通过javascript完成所有操作并从您的CSS中删除@media (max-width....？

function resize() {
    var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
    if(width<992){
        $("div").each(function(e,obj){$(obj).height(200);});
    }
    $('#clickMe').offset({
        top: $parent.offset().top + $parent.height()-$('#clickMe').height()
    });

}

Answer 3

在html页面中，将链接放在 head 部分的css文件中;接下来，将链接放在 / body 标记之前的js文件中，看看会发生什么。这样css将在js之前加载始终。希望这能帮助你。

Answer 4

您是否尝试将调整大小处理程序绑定到窗口，而不是绑定到要侦听调整大小的对象？

而不是

$(window).on('resize', resize);

你可以尝试

$("#clickMe").on('resize', resize);

或者

$("#clickMe").parent().on('resize', resize);

Answer 5

var didResize = false;
$(window).resize(function() {
    didResize = true;
});
setInterval(function() {
    if (didResize) {
        didResize = false;
        console.log('resize');
    }
}, 250);

Answer 6

我同意falsarella的意见，你应该尝试只使用CSS来做你想做的事。

无论如何，如果你想在应用CSS之后用JS做些什么，我认为你可以使用requestAnimationFrame，但我自己无法测试它，因为我无法重现你解释的行为

来自MDN doc：

window.requestAnimationFrame()方法告诉浏览器您希望执行动画并请求浏览器调用指定在下次重绘之前更新动画的函数。该 method将一个回调作为一个参数，在之前调用重绘。

我会尝试这样的事情：

var $parent = $('#clickMe').parent(); function resize(){ $('#clickMe').offset({ top: $parent.offset().top + $parent.height()-$('#clickMe').height() }); } window.onresize = function(e){ window.requestAnimationFrame(resize); } window.requestAnimationFrame(resize);

Answer 7

有人知道等待css完全加载的技术吗？

$(window).load(function() { /* ... */ }怎么样？（它仅在页面完全加载时执行该功能，因此在加载css之后）

JS在CSS之前启动

7 个答案: