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);
[...] 
});

我意识到使用显式偏移并且不是hackish，但是我很着急并且稍后会纠正它。是的，我正在使用jQuery。

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

谢谢！

Answer 1

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

如果你必须在加载后调整元素大小，我唯一可以想到的可能就是有一个覆盖整个窗口的叠加层，可能是这样的：

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

然后在$("#overlay").hide()功能调整大小后，通过$(document).ready()隐藏叠加层。我没有测试过这个，所以我不知道它是否有效。您可能还需要添加短setTimeOut。

老实说，这个解决方案感觉很脏。希望别人能想到更优雅的东西。

Answer 2

@ZDYN是对的。当页面显示但jQuery代码尚未执行时，会发生“闪烁”。

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

jquery javascript调整大小抖动

2 个答案: