$(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