$(document).ready 故障，$(document).resize 有效 - 相同的处理程序答案

【问题标题】：$(document).ready malfunction, $(document).resize works - same handler$(document).ready 故障，$(document).resize 有效 - 相同的处理程序
【发布时间】：2019-11-04 02:47:22
【问题描述】：

我正在尝试使用引导程序和 jQuery 实现动态英雄。英雄是带有引用和背景图像的横幅。我遇到的问题是当引号超过一定长度时，文本会随着子元素的总高度超过容器 div 的高度而消失。我使用 jQuery 附加了一个 document.ready 和 document.resize 处理程序，它计算所有子项的高度并适当地调整容器 div 的大小：

function getHeights() {
    let childVertOffset = $("#client-hero-child").offset().top;
    let childHeightTotal = 0;

    let children = $("[id=client-hero-child]");
    children.each(function () {
        childHeightTotal += ($(this).outerHeight());
    });

    return childHeightTotal + childVertOffset;
}


function fixContainerHeight(newHeight) {
    $("#client-hero").height(newHeight)
}

我将 document.ready 和 resize 处理程序附加到页面，如下所示：

$(window).resize(function () {
    if (window.location.pathname.includes('clients/')) {
        fixContainerHeight(getHeights())
    }
});


$(document).ready(function () {
    if (window.location.pathname.includes('clients/')) {
        fixContainerHeight(getHeights())
    }
});

document.resize 处理程序完美运行，但我遇到的问题是 document.ready 处理程序似乎在所有内容都正确加载之前触发。调整大小总是以一致的量关闭（计算孩子的高度比调整大小处理程序少约 80 像素）。更有趣的是，当我复制 document.ready 语句时，代码可以正常工作（提示该函数触发得太快），但是如果我将 document.ready 函数添加到 setTimeout 函数，它就不起作用，这表示相反。

如果我执行以下操作并复制处理程序（可能是在内容加载之前触发函数的问题？），它会起作用：

$(document).ready(function () {
    if (window.location.pathname.includes('clients/')) {
        fixContainerHeight(getHeights())
    }
});


$(document).ready(function () {
    if (window.location.pathname.includes('clients/')) {
        fixContainerHeight(getHeights())
    }
});

但这不起作用：

setTimeout(function(){
    fixContainerHeight(getHeights())
},100);

html(erb)如下：

  <div class="row" id="client-hero-child">
    <div class="col-12 px-sm-0">
      <%= image_tag(@case.logo.url, class: "float-left testimonial-logo") %>
    </div>
    <div class="category-description">
      <p class="left-align client-text"><%= @case.category %></p>
    </div>
    <p class="client-text">"<%= @case.quote.html_safe %>"</p>
    <div class="col-12 pt-3" id ="client-hero-child">
      <span class="float-right client-text"><%= @case.quotee %></span><br/>
      <span class="float-right quote-position" style="margin-bottom: 15px"><%= @case.quotee_position %></span>
    </div>
  </div>

非常感谢任何帮助，谢谢！

更新：

经过一些故障排除和控制台日志记录后，我发现问题与 CSS 功能有关 - 我有以下 css：

#client-hero {
  height: 520px;
  background-repeat: no-repeat;
  .banner_detail_height {
    position: relative;
    top: 20%;
  }

'top' 属性导致了问题，这似乎在页面加载后的瞬间发生。这解释了为什么重复的代码可以解决问题。负载处理程序第一次运行时，它计算顶点偏移量为 110px，然后运行 css，添加 20% 的上边距，然后处理程序第二次运行，并计算 200px 的顶点偏移量。

有没有办法确保样式在处理程序之前运行？

【问题讨论】：

考虑改为监听 load 事件？ developer.mozilla.org/en-US/docs/Web/API/Window/load_event
试过了，同样的问题 - 没有正确计算子元素的高度，然后如果我调整很小的数量（将屏幕增加 1px），一切都会正确计算和格式化。有趣的是，如果我复制代码并添加一些控制台日志，我可以看到它是错误计算的垂直偏移量：第一次 onload 运行：垂直偏移量：101.58 px 子高度：1073.91 px 第二次onload 运行：垂直偏移：213.02 px 子高度：1073.91 px 所以这个问题肯定与垂直偏移和事件顺序有关。
你是在页面加载后加载图片还是字体？
如果您将setTimeout 设置为更大的值，例如10000。如果还在等待加载内容，那么 100 毫秒并不是很长。
请注意，doc.ready 在 DOM 准备就绪时运行，不在页面完成加载/所有“内容”已加载时运行.您可能需要向图像等添加额外的偶数处理程序。

标签： javascript jquery html ruby-on-rails

【解决方案1】：

设法找到了问题，这是由于 $(window).on('load') 函数在应用 CSS 'top' 属性之前运行的。通过将 css 'top' 更改为 'padding'，它似乎影响了事件的顺序，并且 css 在 onLoad 处理程序之前运行。

【讨论】：