javascript - jQuery hide() 方法在 IE8 中不会立即生效？

Question

我们拥有的是一些通过 jQuery 垂直居中对齐的图像。我们想要发生的是在 $(document).ready 上隐藏未对齐的图像(意思是不居中)，然后运行在 window.onload 上居中的函数，然后显示之后的图像。

当页面加载时，图像会立即隐藏在 Firefox 和 Chrome 上。但是在 IE8 中，有那么一瞬间，它仍然会在隐藏之前显示未对齐的图像。

有没有办法让 IE8 更快/立即隐藏它们？下面是代码:

<script language="javascript" type="text/javascript">
$(document).ready(function() {
    $('.img_mask img').hide();
});

window.onload = function() {
    $('.img_mask img').each(function() {
        var $img = $(this);
        var h = $img.height();
        var w = $img.width();
        $img.css('margin-top', +h / -2 + "px").css('margin-left',+ w/ -2 + "px");
        $('.img_mask img').show();
    });

Answer 1

您不能保证 javascript 会在页面中的内容显示之前运行。你就是做不到，而 IE 是最糟糕的。

您有几个选项可以解决您的问题:

1. 使用 CSS 样式表规则使图像最初隐藏，然后使用 javascript 仅显示对齐的图像。
2. 不要将未对齐的图片放入 DOM - 只放入对齐的图片。这可能需要更改页面 HTML 的工作方式。图片可以在 javascript 数组中，您可以通过 JS 加载它们，并且只插入将对齐的图片。
3. 隐藏图像容器，直到您运行 javascript 并清除未对齐的图像。

如果您关心没有 javascript 的网站，您可能还想在 <noscript> 中显示最初隐藏的图像。在 <style> 中使用 CSS 规则标记标签