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

Posted 2023-05-09

【中文标题】$(document).ready 故障，$(document).resize 有效 - 相同的处理程序

【英文标题】：$(document).ready malfunction, $(document).resize works - same handler

【发布时间】：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 准备就绪时运行，不在页面完成加载/所有“内容”已加载时运行.您可能需要向图像等添加额外的偶数处理程序。

【参考方案1】：

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