这个问题目前在Chrome中发生,但我在Firefox中没有遇到过这个问题(至少还没有)。
以下是一个非常简化的版本来描述我的问题。
HTML:
<div class="thumbnail">
<a href='#' id="clickMe">Click me!</a>
</div>
CSS:
div {
width: 200px;
height: 300px;
background-color: purple;
}
a {
position: absolute;
}
@media (max-width: 991px) {
div {
height: 200px;
}
}
Javascript:
$(document).ready(function () {
var $parent = $('#clickMe').parent();
function resize() {
$('#clickMe').offset({
top: $parent.offset().top + $parent.height()-$('#clickMe').height()
});
}
$(window).on('resize', resize);
resize();
});
问题:
那么当我调整大小时(不通过拖动),会发生什么?好吧,javascript首先启动并设置
<a></a>
的位置,然后如果我们小于992像素,CSS应用高度变化。从逻辑上讲,按钮现在在div的外部可见,而不是像我最初定义的那样在边框上。
这篇文章中提出了一个临时解决方案。
链接:jQuery - 如何等待“调整大小”事件的“结束”,然后执行操作?
var doit;
$(window).on('resize', function(){ clearTimeout(doit); doit = setTimeout(resize, 500); });
临时解决方案不是我要寻求的:
然而,在我的情况下,我并不一定需要在调整大小事件实际完成后才调用'resize'。 我只是希望我的 JavaScript 在 CSS 加载完成/或完成其更改后运行。 而且使用该函数“随机”运行 JS 可能会感觉非常缓慢,因为 CSS 可能已经完成。
问题:
是否有解决方法? 有人知道 JS 中的技术可以等待调整大小期间完全应用修改的 CSS 完成吗?
其他信息:
在 jsfiddle 中测试这个可能不会像我一样产生相同的结果。 我的 CSS 文件有很多行,并且我正在使用 Twitter Bootstrap。 这两个占用了很多资源,减慢了 CSS 的应用(我想,如果我错了,请告诉我)。
Miljan Puzović 提出了通过 JS 加载 CSS 文件的解决方案,然后在 CSS 结束时应用 JS 更改的事件。