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

【问题标题】：jQuery hide() method doesn't immediately take effect in IE8?jQuery hide() 方法在 IE8 中不会立即生效？
【发布时间】：2011-08-29 04:55:28
【问题描述】：

我们有一些通过 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();
    });

【问题讨论】：

标签： javascript jquery css internet-explorer-8 show-hide

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

您应该使用display:none 或visibility:hidden 之类的方式隐藏img

.img_mask{
  visibility:hidden;
}

之后使用.show()显示图像

【讨论】：

【解决方案3】：

你的逻辑需要改进。你应该先隐藏img，然后再附加到DOM，等待条件满足再显示。

$('hiddenimg').hide().appendTo($(body));

window.onload = function () {
    if (/*some conditions*/) {
        $('hiddenimg').show();
    }
}

【讨论】：

【解决方案4】：

您可以使用 .ready 函数在加载时将其隐藏，然后显示其他内容？

查看 jquery .ready() 函数...

http://api.jquery.com/ready/

有点像 3nigma 和.. jfriend 说...，将元素设置为具有初始显示：无；然后让它在事件或延迟中显示...可以帮助解决问题吗？

【讨论】：

OP 已经将代码包装在 ready 处理程序中，原因请参阅 jfriend00 答案

【解决方案5】：

如果您在声明最后一项后立即将脚本嵌入 HTML 中是否有效？

<head>
    <script type="text/javascript">
        window.onload = function() {
             // Image aligning code goes here
        }
    </script>
</head>
<body>
    <div class='img_mask'>
        <img src="http://www.hollywoodgo.com/wp-content/uploads/2010/04/smurfs-movie-225x300.jpg"
    </div>

    <script type="text/javascript">
         $('.img_mask img').hide(); 
    </script>
</body>

这对我有用，但我没有安装 IE8 来测试它。

我认为最好让图像在 HTML 中可见并通过脚本隐藏它们（就像你正在做的那样），而不是将它们隐藏在 HTML 中并通过脚本显示。

如果渲染设备禁用了脚本，最好看到图像对齐不好而不是根本不对齐。

【讨论】：

【解决方案6】：

$(document).ready(function() {}

document.ready() 函数正如其名称所暗示的那样工作。 Document 指的是 DOM，或 Document Object Model，而在这种情况下，“ready”指的是 DOM 被浏览器注册的时间。因此，您的代码将等到一切准备就绪并开始处理它。这就是您面临延迟的原因。

【讨论】：

【解决方案7】：

尝试其他方法来加快选择器图像的速度。

$('.img_mask').find('img').hide();

【讨论】：

你不能保证任何 javascript 都会在页面元素显示之前运行。