使用Critical CSS時，Jquery函數不會在加載時運行

Question

我正在嘗試優化我的網站（ http://www.mazion.co.uk ）。

因此，我嘗試使用penthouse為站點創建關鍵的CSS。 （請參閱此處使用的關鍵CSS-這是由penthouse的主要開發人員為我生成的）。

但是，使用關鍵CSS時，我網站上的子頁面之一無法正確加載。 但是，當我完全內聯CSS時（或不做任何優化CSS的工作），此子頁面會正確加載。

在此子頁面-http: //www.mazion.co.uk/courses上 ，有許多框是使用JS函數（請參見下文）在on.ready和on.resize（即，何時調整屏幕大小），以確保所有框的尺寸都相同。

使用關鍵CSS時，調整大小功能僅在.resize上起作用，而在on.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 ...）。