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

Posted

技术标签:

【中文标题】$(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 处理程序之前运行。

【讨论】:

以上是关于$(document).ready 故障,$(document).resize 有效 - 相同的处理程序的主要内容,如果未能解决你的问题,请参考以下文章

$(document).ready()方法和window.onload区别

将样式添加到在 jquery 中 document.ready 之后加载的 div

Desabilitar botÃo direito do鼠标

jQuery图像滑块故障

jq使用的知识

倒计时,用于限时优惠