jjzjj

javascript - JS 在 CSS 之前启动

coder 2024-07-28 原文

这目前在 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 - 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); });

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

但是，在我的情况下，我真的不需要只在调整大小事件实际完成时才调用“调整大小”。我只是希望我的 javascript 在 css 完成加载/或完成它的更改后运行。当 css 可能已经完成了。

问题:

有解决办法吗？任何人都知道 js 中的一种技术，可以等到 css 完全完成后在调整大小期间应用修改？

附加信息:

在 jsfiddle 中测试这个很可能不会给你和我一样的结果。我的 css 文件有很多行，我正在使用 Twitter Bootstrap。这两个占用大量资源，减慢css应用程序(我想，如果我错了告诉我)。

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

最佳答案

我认为这三个简单的步骤将实现预期的行为(请仔细阅读:我还建议阅读更多有关上述属性的信息以深入了解其工作原理):

  1. 响应式 和流畅 布局问题应始终主要(如果不是严格地)使用 CSS 解决。

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

  2. 您已经绝对定位了内部 a#clickMe 元素。

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

  3. 根据您提供的脚本，您似乎需要将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

关于javascript - JS 在 CSS 之前启动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24180350/

javascriptCSScodestrongnoreferrerjquerytwitter-bootstrapresponsive-design

有关javascript - JS 在 CSS 之前启动的更多相关文章

  1. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  2. ruby-on-rails - 启动 Rails 服务器时 ImageMagick 的警告 - 2

    最近，当我启动我的Rails服务器时，我收到了一长串警告。虽然它不影响我的应用程序，但我想知道如何解决这些警告。我的估计是imagemagick以某种方式被调用了两次？当我在警告前后检查我的git日志时。我想知道如何解决这个问题。-bcrypt-ruby(3.1.2)-better_errors(1.0.1)+bcrypt(3.1.7)+bcrypt-ruby(3.1.5)-bcrypt(>=3.1.3)+better_errors(1.1.0)bcrypt和imagemagick有关系吗？/Users/rbchris/.rbenv/versions/2.0.0-p247/lib/ru

  3. ruby - 如何在 Rails 4 中使用表单对象之前的验证回调？ - 2

    我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser

  4. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  5. UE4 源码阅读：从引擎启动到Receive Begin Play - 2

    一、引擎主循环UE版本：4.27一、引擎主循环的位置：Launch.cpp:GuardedMain函数二、、GuardedMain函数执行逻辑：1、EnginePreInit：加载大多数模块int32ErrorLevel=EnginePreInit(CmdLine);PreInit模块加载顺序：模块加载过程：（1）注册模块中定义的UObject，同时为每个类构造一个类默认对象（CDO，记录类的默认状态，作为模板用于子类实例创建）（2）调用模块的StartUpModule方法2、FEngineLoop::Init()1、检查Engine的配置文件找出使用了哪一个GameEngine类（UGame

  6. ruby-on-rails - 如何处理 Grape 中特定操作的过滤器之前？ - 2

    我正在我的Rails项目中安装Grape以构建RESTfulAPI。现在一些端点的操作需要身份验证，而另一些则不需要身份验证。例如，我有users端点，看起来像这样:moduleBackendmoduleV1classUsers现在如您所见，除了password/forget之外的所有操作都需要用户登录/验证。创建一个新的端点也没有意义，比如passwords并且只是删除password/forget从逻辑上讲，这个端点应该与用户资源。问题是Grapebefore过滤器没有像except,only这样的选项，我可以在其中说对某些操作应用过滤器。您通常如何干净利落地处理这种情况？

  7. ruby-on-rails - 在 Ruby on Rails 中发送响应之前如何等待多个异步操作完成？ - 2

    在我做的一些网络开发中，我有多个操作开始，比如对外部API的GET请求，我希望它们同时开始，因为一个不依赖另一个的结果。我希望事情能够在后台运行。我找到了concurrent-rubylibrary这似乎运作良好。通过将其混合到您创建的类中，该类的方法具有在后台线程上运行的异步版本。这导致我编写如下代码，其中FirstAsyncWorker和SecondAsyncWorker是我编写的类，我在其中混合了Concurrent::Async模块，并编写了一个名为“work”的方法来发送HTTP请求:defindexop1_result=FirstAsyncWorker.new.async.

  8. ruby-on-rails - 在所有延迟的作业之前 Hook - 2

    是否可以在所有delayed_job任务之前运行一个方法？基本上，我们试图确保每个运行delayed_job的服务器都有我们代码的最新实例，所以我们想运行一个方法来在每个作业运行之前检查它。(我们已经有了“check”方法并在别处使用它。问题只是关于如何从delayed_job中调用它。) 最佳答案 现在有一种官方方法可以通过插件来做到这一点。这篇博文通过示例清楚地描述了如何执行此操作http://www.salsify.com/blog/delayed-jobs-callbacks-and-hooks-in-rails(本文中描述

  9. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  10. ruby-on-rails - define_method 在调用方法之前不使用变量？ - 2

    我无法从for循环中获取变量。似乎i(var)是稍后计算的，而不是我完全需要的类定义。ree-1.8.7-2010.02>classPatree-1.8.7-2010.02?>foriin39..47ree-1.8.7-2010.02?>define_method("a#{i}".to_sym)doree-1.8.7-2010.02>putsiree-1.8.7-2010.02?>endree-1.8.7-2010.02?>endree-1.8.7-2010.02?>end#=>39..47ree-1.8.7-2010.02>p=Pat.new#=>#ree-1.8.7-2010.02

随机推荐