jquery javascript调整大小抖动

我有一些简单的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进行元素操作的一个事实，还是我在论坛上错过了一些解决方案

---

谢谢

我怀疑原因是您正在

$（document）.ready（）

中调用它，它在加载DOM后运行（即您的元素已经显示）

如果你必须在加载元素后调整它们的大小，我唯一能想到的可能是有一个覆盖整个窗口的覆盖层，可能类似于：

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

然后通过

$（“#overlay”）.hide（）

在

$（文档）.ready（）函数中调整大小后隐藏覆盖。我还没有测试过这个，所以我不知道它是否有效。您可能还需要添加一个短的
setTimeOut

不过，老实说，这种解决方案感觉非常肮脏。希望其他人能想出更优雅的东西。
@ZDYN是正确的。当页面显示但jQuery代码尚未执行时，会发生“闪烁”

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