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

Question

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

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

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

在此子页面上 - http://www.mazion.co.uk/courses ，有许多框使用 JS 函数(见下文)调整大小，该函数在 on.ready 和 on.resize(即调整屏幕大小时)运行，确保所有框的大小相同。

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

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

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

Js Function(不是很重要的问题，但有助于设置场景)

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

Answer 1

我的问题的答案很简单:

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

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