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

Question

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

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

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

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

使用关键 CSS 时，调整大小功能有效 on.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'
    };
  })
}

Answer 1

我的问题的答案很简单：

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

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

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

When Using Critical CSS, Jquery function does is not running on load

javascript

css

optimization

jquery

resize

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

When Using Critical CSS, Jquery function does is not running on load

javascript

css

optimization

jquery

resize

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