jquery javascript 调整抖动大小

Question

我有一些简单的 JavaScript，用于自动调整页面上元素的宽度并使这些页面上的文本垂直居中。

我的脚本可以工作，但在 IE9 和 Safari 中，有一个明显的时刻，元素没有调整大小，而是在页面上跳转。这只是一瞬间的闪现，但它让我烦恼，因为我通常不是一个“足够好”的人。这是我自己的脚本：

$(document).ready(function() { 
var containerwidth = $("#main_content").css("width");
var picwidth = $(".picture").css("width");

$(".picture").parent().css("width", picwidth);
var correctwidth = parseInt(containerwidth) - parseInt(picwidth);

$(".main-text").css("width",correctwidth-25);

if( $(".margins").css("width") ) {
    $(".title").css("width", parseInt($(".width-set").css("width"))+10);
} else {
    $(".title").css("width", parseInt($(".title").parent().css("width"))-10);
}

var container_height = $(".main-text").height();
var text_height = $(".vert-align").height();
var offset = (container_height - text_height) / 2;

$(".vert-align").css("margin-top", offset);
[...] 
});

我意识到使用显式偏移量之类的东西是很黑客的，但我很着急，稍后会更正它。是的，我正在使用 jQuery。

它存储在一个文件中，我尝试在头部调用它，也尝试在它影响的元素之后直接调用它，但结果是相同的。这种抖动是否只是使用 javascript 进行元素操作的一个事实，还是我在论坛上错过了一些解决方案？

谢谢！

Answer 1

@ZDYN 是正确的。 “闪烁”发生在页面显示但jQuery代码尚未执行时。

您可以尝试在 css 中将元素设置为“可见性：隐藏”，以便它们具有用于计算的尺寸，然后在调整大小后将可见性更改为“可见”。

Answer 2

我怀疑原因是因为你在 $(document).ready() 中调用它，它在加载 DOM 之后运行（即你的元素已经显示） 。

如果您绝对必须在加载元素后调整元素大小，我能想到的唯一可能有帮助的是覆盖整个窗口的覆盖层，也许类似于：

#overlay{
    position: fixed;
    width: 100%; height: 100%;
    background: #fff;
    z-index: 9001;
}

然后通过 $("#在 $(document).ready() 函数中调整大小后覆盖").hide()。我没有测试过这个所以我不知道它是否有效。您可能还需要添加一个简短的 setTimeOut。

但说实话，这个解决方案感觉很肮脏。希望其他人能想到更优雅的东西。