javascript - CSS和Javascript之间的顺序是什么

标签 javascript css

我有一个奇怪的间歇性错误,该错误发生在填充滑动器中嵌入的列表后。本质上,我在页脚上溢出了列表的最后一个元素。

奇怪的是,它出现在我插入最后一个节点之后的一段时间,实际上是在我调用了 swiper reninitialiser 之后。

如果我触发调整大小事件,它会自行修复 - 但前提是我在调用滑动器重新初始化后等待 500 毫秒到 2 秒。

为了让这一切变得非常有趣,重叠的数量一直在变化。

这让我想知道我看到的是否是 javascript 填充列表并调用 swiper reinit,然后在 firefox 和 chrome 的某个地方应用了所有样式,这导致了溢出。

我真的不想使用定时器相关的触发器 - 因为不同的用户 CPU 速度。而且我不想一直尝试直到它出现 - 因为有时它根本不会发生。

不管怎样,有没有人听过关于何时将 CSS 应用于 javascript 的 60 秒讲座 - 是否有机会告诉我它已完成,以便我可以在调整大小后检查 div?

最佳答案

通过 CSS 样式表应用 CSS 样式时没有延迟。样式在重绘或重新布局之前应用。无需等待应用 CSS 样式表规则,除非您动态加载样式表或将其放置在它影响的 HTML 之后。

我的猜测是,在更改的内容被正确布局之前,swiper 重新初始化器中的某些东西正在做一些事情。延迟允许布局发生,因此下次调整大小时,一切都会自行修复。

没有看到真正发生的事情(可能在一个工作网页中)并且没有更多地了解刷卡代码,我们所能做的就是猜测。我大胆的猜测是在修改列表之后和重新初始化之前必须进行布局。有几种方法可以通过请求浏览器知道在布局发生之前不准确的某些属性来强制布局。使用 setTimeout(fn, 1) 等待重绘也会在 fn 回调被调用之前触发任何挂起的布局以及 setTimeout() 中的任何时间值 将起作用,因为只需等待 setTimeout() 触发即可进行重绘。

您可以在 this article 中查看如何触发布局(请求这些属性中的任何一个 offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop/Left/Width/Height、clientTop/Left/Width/Height)。

关于javascript - CSS和Javascript之间的顺序是什么,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20160044/

相关文章:

javascript - 将嵌套列表写成结构化 JSON

javascript - bootstrap datepicker 中的 beforeShowDay 禁用下一个日期

css - 将元素的绝对位置保持在其容器内的中左位置

javascript - 如何使用 Javascript 创建 <style> 标签?

javascript - Highlight.js 在 Haskell 上失败了?

css - 使用边缘位置的 margin

javascript - 为数组中的每个键执行函数 w/o 循环

Javascript 函数参数为 "-"

javascript - 文本字段中的 jQuery 前缀破折号

web - 网页的流体布局模式创建