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是最糟糕的。

您有几种方法可以解决您的问题：

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

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

Answer 2

你应该使用display:none或visibility:hidden喜欢

隐藏img

.img_mask{
  visibility:hidden;
}

然后使用.show()

显示图像

Answer 3

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

查看jquery .ready（）函数...

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

有点像3nigma和.. jfriend说...，设置元素有一个初始显示：none;然后把它展示在一个事件或延迟......可以帮助解决问题吗？

Answer 4

您的逻辑需要改进。您应先隐藏img，然后再将其附加到DOM，等待条件符合，然后显示。

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

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

Answer 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中并通过脚本显示。

如果渲染设备禁用了脚本，最好看到图像严重对齐，然后根本不对齐。

Answer 6

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

document.ready（）函数就像名称所暗示的那样工作。文档是指DOM或文档对象模型，而在这种情况下，“就绪”是指浏览器注册DOM的时间。因此，您的代码将等待所有事情都准备好并开始处理它。这就是为什么你面临一些延迟。

Answer 7

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

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

jQuery hide（）方法在IE8中不会立即生效？

7 个答案: