JS在CSS之前启动 [英] JS launches before CSS

查看：131 发布时间：2017/2/6 12:37:16 javascript jquery css twitter-bootstrap responsive-design

本文介绍了JS在CSS之前启动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是一个非常简单的版本我的问题。

这是目前发生在chrome，在firefox我没有这个问题。 p>

HTML：

 < div class =thumbnail> 
< a href ='＃'id =clickMe>点击我！< / a> 
< / div>

CSS：

  div {
 width：200px; 
 height：300px; 
 background-color：purple; 
} 
 a {
 position：absolute; 
} 
 @media（max-width：991px）{
 div {
 height：200px; 
} 
}

Javascript： p>

  $（document）.ready（function（）{
 var $ parent = $（'＃clickMe'）。parent （）; 
 function resize（）{
 $（'＃clickMe'）。offset（{
 top：$ parent.offset （'#clickMe'）。height（）
}）; 
} 
 $（window）.on（'resize'，resize）; 
 resize $ b}）;

问题：

$ b b

那么，当我调整大小（不拖动）时，这是什么？ javascript 首先启动并设置< a>< / a> 的位置，然后 CSS 应用高度变化，如果我们< 992 px。

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

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

jQuery - 如何等待'end'或'resize'事件然后才执行操作？

  var doit; 
 $（window）.on（'resize'，function（）{clearTimeout（doit）; doit = setTimeout（resize，500）;}）;

暂时解决方案不是我要找的：

然而，在我的情况下，我真的不需要只调用'resize'当调整大小事件实际完成。我只是想让我的 javascript运行后，CSS完成加载/或完成它的更改。它感觉超慢使用该功能'randomely'运行JS当 css 可能已完成。

问题：

解决方案？

附加信息：

任何人知道在js中等待css的技术是否完全应用修改？

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

MiljanPuzović -

解决方案

我认为这些简单的三个步骤将会达到预期的行为（请仔细阅读：我还建议阅读更多关于提及的属性，深入了解它是如何工作的）：

布局问题应始终以 CSS 为主。 / p>

因此，请删除 JavaScript 所有代码。

您已经定位了内部 a＃clickMe 元素。

这意味着它将被定位在其最靠近的相对定位元件内。通过提供的样式，它将位于 body 元素中，因为在任何位置都没有 position：relative; 其他元素（默认 position 值为 static ）。通过提供的脚本，它似乎应该放置在其直接的父容器中。为此，请将 position：relative; 添加到 div.thumbnail 元素。

您提供的脚本似乎需要将 a＃clickMe 放在 c。
现在我们确定样式已添加到 a＃clickMe 相对于 div.thumbnail ，只需将底部：0px; 添加到< #clickMe 元素，它将被相应地定位，而与父元素的高度无关。请注意，在调整窗口大小时（不需要脚本），这将自动重新排列。

像这样（ see fiddle here ）：

JS：

  / *无需脚本。 * /

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：响应式设计 - 当窗口大小从980像素调整为979像素时执行JS

This is currently happening in chrome, in firefox I haven't had this issue (yet).

Here is a VERY simplified version of my problem.

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();
});

The problem:

So what does this give when I resize (without dragging)? Well javascript launches first and sets the position of the <a></a> , then CSS applies the height change if we are < 992 px.

Logically the button is now visually at the outside of the div and not on the border like I had originally defined it to be.

Temporary solution proposed in this post.

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

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

Temporary solution is not what I'm looking for:

However, in my situation I don't really need to only call 'resize' when the resizing event is actually done. I just want my javascript to run after the css is finished loading/ or finished with it's changes. And it just feels super slow using that function to 'randomely' run the JS when the css might be finished.

The question:

Is there a solution to this? Anyone know of a technique in js to wait till css is completely done applying the modifications during a resize?

Additional Information:

Testing this in jsfiddle will most likely not give you the same outcome as I. My css file has many lines, and I'am using Twitter Bootstrap. These two take up a lot of ressources, slowing down the css application (I think, tell me if I'm wrong).

Miljan Puzović - proposed a solution by loading css files via js, and then apply js changes when the js event on css ends.

解决方案

I think that these simple three steps will achieve the intended behavior (please read it carefully: I also suggest to read more about the mentioned attributes to deeply understand how it works):

Responsive and fluid layout issues should always be primarily (if not scrictly) resolved with CSS.

So, remove all of your JavaScript code.
You have positioned the inner a#clickMe element absolutely.

This means that it will be positioned within its closest relatively positioned element. By the style provided, it will be positioned within the body element, since there is no position: relative; in any other element (the default position value is static). By the script provided, it seems that it should be positioned within its direct parent container. To do so, add position: relative; to the div.thumbnail element.
By the script you provided, it seems that you need to place the a#clickMe at the bottom of div.thumbnail.

Now that we are sure that the styles added to a#clickMe is relative to div.thumbnail, just add bottom: 0px; to the a#clickMe element and it will be positioned accordingly, independently of the height that its parent has. Note that this will automatically rearrange when the window is resized (with no script needed).

The final code will be like this (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;
    }
}

If you still insist on media query change detection, see these links:

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

这篇关于JS在CSS之前启动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文