使用关键 CSS 时，Jquery 函数不会在加载时运行答案

【问题标题】：When Using Critical CSS, Jquery function does is not running on load使用关键 CSS 时，Jquery 函数不会在加载时运行
【发布时间】：2015-05-27 21:04:10
【问题描述】：

我正在尝试优化我的网站 (http://www.mazion.co.uk)。

因此，我尝试使用 penthouse 为网站创建关键 CSS。（请参阅使用的关键 CSS here - 这是由 penthouse 的主要开发人员为我生成的）。

但是，当使用关键 CSS 时，我网站上的其中一个子页面无法正确加载。但是，当我完全内联 CSS（或不做任何优化 CSS）时，这个子页面会正确加载。

在这个子页面 - http://www.mazion.co.uk/courses 上，有许多框使用运行 on.ready 和 on.resize 的 JS 函数（见下文）调整大小（即在调整屏幕大小时），以确保所有盒子的大小都一样。

使用关键 CSS 时，调整大小功能在.resize 上有效，但在 on.ready 上无效。另一方面，使用内联 CSS，调整大小功能按预期工作 on.resize 和 on.ready...

因此，我想知道是否有人可以帮助我找出问题所在。我曾尝试将框的样式直接内联到 HTML 中，但没有成功...

您可以通过转到http://www.mazion.co.uk/courses/ 并查看这些框来查看此问题。如果您随后调整浏览器的大小，所有框都会自行调整大小，以使它们都具有相同的高度...这种使所有框具有相同高度的调整大小实际上应该在页面加载时自动发生....

Js 函数（问题不是特别重要，但有助于设置场景）

jQuery(document).ready(function($){

  $(window).resize(function() {
    resizeCourseBoxes()
    resizeTopBespokeCoursesBoxes()
    resizeMidBespokeCoursesBoxes()
  }).resize(); // Trigger resize handlers.
});

// Ensure that all the courses boxes are the same height (this ensures that the rows are of the same size...)
function resizeCourseBoxes() {
  jQuery(function($) {
    courseHeader = $('.course_header')
    maxTextHeight = Math.max.apply(
    Math, courseHeader.map(function() {
      return $(this).height()
    }).get())

    for (var i = 0; i < courseHeader.length; i++) {
      currentHeight = courseHeader[i].offsetHeight
      new_padding = Number(maxTextHeight) - currentHeight + 10
      courseHeader[i].style.marginBottom = new_padding + 'px'
    };
  })
}

// Ensure that all mid section (prices section) of the bespoke section is the same
function resizeTopBespokeCoursesBoxes() {
  jQuery(function($) {

    CoursePriceSection = $('.green_bx_top')
    maxTextHeight = Math.max.apply(
    Math, CoursePriceSection.map(function() {
      return $(this).height()
    }).get())

    for (var i = 0; i < CoursePriceSection.length; i++) {
      currentHeight = CoursePriceSection[i].offsetHeight
      new_padding = Number(maxTextHeight) - currentHeight + 10
      CoursePriceSection[i].style.marginBottom = new_padding + 'px'
    };
  })
}

// Ensure that all mid section (prices section) of the bespoke section is the same
function resizeMidBespokeCoursesBoxes() {
  jQuery(function($) {

    CoursePriceSection = $('.green_bx_mid')
    maxTextHeight = Math.max.apply(
    Math, CoursePriceSection.map(function() {
      return $(this).height()
    }).get())

    for (var i = 0; i < CoursePriceSection.length; i++) {
      currentHeight = CoursePriceSection[i].offsetHeight
      new_padding = Number(maxTextHeight) - currentHeight
      CoursePriceSection[i].style.marginBottom = new_padding + 'px'
    };
  })
}

【问题讨论】：

不知道你到底在做什么，但$(window).resize(function() 应该在 doc.ready 之外
@ctf0 我假设这意味着“准备就绪”和“调整大小时” - 它在正常情况下（即没有关键的 CSS）完美运行...
您使用的不是“加载”处理程序，而是“就绪”处理程序。 “ready”事件在 DOM 构建完成但（可能）在外部资源（如 CSS）已加载时触发。尝试将 jQuery(document).ready(...) 更改为 jQuery(window).load(...)（在这种情况下，您不会将 $ 传递给您，但它应该等待您的 CSS 加载）。
它会像你描述的那样工作，但两者都是不同的全球事件，恕我直言不应该在彼此之间。
@Pointy，我做了这个改变，但是没有用....

标签： javascript jquery css optimization resize

【解决方案1】：

我的问题的答案很简单：

Critical CSS 特定于每个 HTML 页面。因此，每个单独页面的关键 CSS 应单独计算...

（我对所有子页面都使用了相同的关键 CSS...）。

【讨论】：