JS在CSS之前启动

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应用高度的变化,如果我们<992像素.

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

本文提出的临时解决方案.

jQuery - 如何等待'resize'事件的'end'然后再执行一个动作？

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

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

但是,在我的情况下,我真的不需要在调整大小事件实际完成时调用'resize'.我只是希望我的javascript在css完成加载/或完成它的更改后运行.当css可能完成时,使用该函数"randomely"运行JS时感觉非常慢.

问题:

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

附加信息:

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

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

Answer 1

我认为这些简单的三个步骤将实现预期的行为(请仔细阅读:我还建议阅读更多关于所提到的属性,以深入了解它是如何工作的):

1. 响应性和流畅的布局问题应始终主要(如果不是scrictly)解决CSS.

   因此,删除所有JavaScript代码.

2. 你已经完全定位了内部a#clickMe元素.

   这意味着它将位于其最近的相对定位元素内.根据提供的样式,它将定位在body元素内,因为position: relative;在任何其他元素中没有(默认position值为static).通过提供的脚本,它似乎应该位于其直接父容器中.为此,请添加position: relative;到div.thumbnail元素.

3. 通过您提供的脚本,您似乎需要将其a#clickMe置于底部div.thumbnail.

   现在我们确定添加的样式a#clickMe是相对的div.thumbnail,只需添加bottom: 0px; 到a#clickMe元素,它将相应地定位,与其父级的高度无关.请注意,在调整窗口大小时(不需要脚本),这将自动重新排列.

最终的代码将是这样的(见这里的小提琴):

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 - 如何检测媒体查询何时开始

Bootstrap:响应式设计 - 当窗口从980px调整为979px时执行JS