CSS和Javascript之间的顺序是什么

时间:2013-11-23 08:00:53

标签: javascript css

在填充嵌入swiper中的列表后,我发生了一个奇怪的间歇性错误。基本上我是通过页脚获取列表的最后一个元素溢出。

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

如果我触发调整大小事件它会自行修复 - 但是只有在我调用swiper reinit后等待500ms到2s之间。

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

这让我想知道我看到的是javascript填充列表并调用swiper reinit然后在firefox和chrome的内容中的所有样式正在应用,这导致溢出。

我真的不想使用与计时器相关的触发器 - 因为用户CPU速度不同。

。我不想继续尝试它,直到它确实存在 - 因为有时它根本不会发生。

无论如何,有没有人有关于javascript应用CSS的60秒讲座 - 并且偶然会有一些事件告诉我它是完整的所以我可以在它被调整大小后检查div?

1 个答案:

答案 0 :(得分:1)

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

我的猜测是swiper reinitialzer中的某些内容在更改的内容被正确布局之前正在做一些事情。延迟允许布局发生,所以下次调整大小时,它都会自行修复。

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

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