$(document).ready()也可以使用CSS吗?

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


进行居中的时间明显滞后,并且块元素跳入位置。这可能与性能相关-页面的尺寸通常很大,并且有大量的JavaScript可以一次执行。


居中将完全弄乱,并且块元素将被向下推得太远或不够。似乎是试图计算高度,但测量结果不正确。


是否有任何理由为什么在不支持DOM的情况下执行脚本仍没有将所有正确的CSS值注入到DOM中?(所有CSS都在<head>通过中<link>)。


此外,这是引起问题的脚本(是的,直接从此处获取):


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

谢谢。


米琪卡哇伊
浏览 530回答 3
3回答

临摹微笑

根据HTML5,DOMContentLoaded是一个普通的DOM ready事件,没有考虑样式表。但是,HTML5解析算法要求浏览器将脚本的执行推迟到加载所有以前的样式表之前。(DOMContentLoaded和样式表)在莫利(2010)的测试中,IE和Firefox阻止所有后续脚本执行,直到加载样式表Webkit仅针对外部脚本阻止了后续执行(<script src>)Opera没有阻止任何脚本的后续执行现在,所有现代浏览器都支持DOMContentLoaded(2017),因此它们现在可能已经对此行为进行了标准化。
打开App,查看更多内容
随时随地看视频慕课网APP