草庐IT

javascript - $(document).ready() 也准备好 CSS 了吗？

coder 2023-07-04 原文

我有一个在 $(document).ready() 上执行的脚本，它应该在我的布局中垂直对齐 block 元素。 90% 的时间，它都可以正常工作。但是，对于这额外的 10%，会发生以下两种情况之一:

  • 居中时间明显滞后， block 元素跳到位。这可能只是与性能相关 - 因为页面大小通常很大，并且有相当数量的 javascript 正在同时执行。

  • 居中将完全困惑， block 元素将被向下推得太远或不够远。它似乎试图计算高度，但得到的测量结果不正确。

为什么在 DOM-ready 上执行脚本不会将所有正确的 CSS 值注入(inject) DOM 有什么原因吗？ (所有 CSS 通过 <head> 位于 <link> 中)。

此外，这是导致问题的脚本(是的，它直接取自 here ):

 (function ($) {
    // VERTICALLY ALIGN FUNCTION
    $.fn.vAlign = function() {
      return this.each(function(i) {
        var ah = $(this).height();
        var ph = $(this).parent().height();
        var mh = (ph - ah) / 2;
        $(this).css('margin-top', mh);
      });
    };
  })(jQuery);

谢谢。

最佳答案

来自1.3 release notes :

The ready() method no longer tries to make any guarantees about waiting for all stylesheets to be loaded. Instead all CSS files should be included before the scripts on the page. More Information

来自ready(fn) documentation :

Note: Please make sure that all stylesheets are included before your scripts (especially those that call the ready function). Doing so will make sure that all element properties are correctly defined before jQuery code begins executing. Failure to do this will cause sporadic problems, especially on WebKit-based browsers such as Safari.

请注意，上面甚至不是关于实际呈现 CSS，因此当ready() 时您可能仍会看到屏幕变化。开始。但它应该可以避免您遇到问题。

其实我觉得把CSS放在JS上面就可以解决所有问题，这有点奇怪。 CSS 是异步加载的，因此 JS 加载可以在 CSS 仍在下载时开始和完成。因此，如果上述是一个解决方案，那么执行任何 JS 代码都会停止，直到所有较早的请求都已完成？

我做了一些测试，确实，有时 JS 会延迟到 CSS 加载完毕。我不知道为什么，因为瀑布显示 JS 在下载 CSS 之前很久就已经完成加载。

参见 JS Bin some HTML和 its results (这有 10 秒的延迟)，请参阅 webpagetest.org 以获取 its waterfall results .这使用了 Steve Souders 的一些脚本 cuzillion.com模仿缓慢的 react 。在瀑布中，引用resource.cgi是CSS。因此，在 Internet Explorer 中，第一个外部 JS 在请求 CSS 后立即开始加载(但 CSS 还需要 10 秒才能完成)。但是第二个<script>标签在 CSS 也完成加载之前不会执行:

<link rel="stylesheet" type="text/css" href=".../a script that delays.cgi" />

<script type="text/javascript" src=".../jquery.min.js"></script> 

<script type="text/javascript"> 
  alert("start after the CSS has fully loaded"); 
  $(document).ready(function() { 
    $("p").addClass("sleepcgi"); 
    alert("ready"); 
  });         
</script>

Another test在获取 jQuery 后使用第二个外部 JS，shows在加载 CSS 之前，不会开始下载第二个 JS。这里，首先引用resource.cgi是CSS，第二个是JS:

将样式表移动到所有 JS 的 下方 确实表明 JS(包括 ready 函数)运行得更早，但即便如此，jQuery 应用的类——当 JS runs-- 在我的 Safari 和 Firefox 快速测试中正确使用。但是像 $(this).height() 这样的事情是有道理的那时会产生错误的值。

然而，additional testing表明 在加载早期定义的 CSS 之前停止 JS 不是通用规则。似乎与使用外部 JS 和 CSS 有某种结合。我不知道这是怎么回事。

最后说明:由于 JS Bin 在从裸 URL 运行时在每个脚本中包含 Google Analytics(如 jsbin.com/aqeno ，测试结果实际上被 JS Bin 更改...编辑 URL 上的输出选项卡，例如 jsbin.com/aqeno/edit 不包括额外的 Google Analytics 内容，肯定会产生不同的结果，但该 URL 很难使用 webpagetest.org 进行测试。对 Stylesheets Block Downloads in Firefox and JavaScript Execution in IE 的引用由 strager 给出是更好理解的良好开端，但我还有很多问题...另请注意 Steve Souders 的 IE8 Parallel Script Loading 让事情变得更加复杂。(上面的瀑布是使用 IE7 创建的。)

也许人们应该简单地相信发行说明和文档......

关于javascript - $(document).ready() 也准备好 CSS 了吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1324568/

javascriptdocumentnoreferrernoopenernofollowjquerycss

有关javascript - $(document).ready() 也准备好 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. 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

  3. 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发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  4. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  5. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

  6. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

  7. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  8. css - rails 萨斯 : variables are not passed with @import - 2

    我有一个使用twitterbootstrap和sass的Rails元素。scss文件结构化到文件夹中，所以我有更好的概述。现在我想为包含我的颜色等的全局变量定义一个文件，并将这些值传递给其他文件，这样我就有更少的冗余代码。虽然所有代码都已正确导入和应用，变量不起作用。这是当前的设置:样式表/application.css.scss/**=require_self*=require_tree*//*stylesheets/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules||–componen

  9. css - Jekyll 和自定义 CSS - 2

    有没有一种方法可以在jekyll站点中包含自定义css标签，同时将markdown用于入口文件？例如，当我想突出显示某个段落时？ 最佳答案 Markdown和YAMLFrontMatter都内置了这个。但你可以自己制作。比如说，您有foo.css想要包含在某些帖子中。在_posts/2013-02-03-higligting-foo.markdown中:---css:footitle:"DrupalImagecachesecurityvulnarabilitywithDDOSattackexplained"tags:[drupal,

  10. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

随机推荐