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

发布于 2024-12-02 03:28:36 字数 687 浏览 2 评论 0原文

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

原文

What we have are some images that are vertically center-aligned via jQuery. What we want to happen is to hide the misaligned images (meaning, not centered) on $(document).ready then run the function for centering on window.onload then show the images after that.

The images hide immediately on Firefox and Chrome when the page is loaded. But in IE8, for a brief second, it still shows the misaligned images before hiding them.

Is there a way for IE8 to hide them faster/immediately? Below is the code:

<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();
    });

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

听闻余生 2024-12-09 03:28:36

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

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

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

如果您关心没有 javascript 的网站，您可能还想使用

回复收藏 0 原文

风铃鹿 2024-12-09 03:28:36

您应该使用 display:none 或 visibility:hidden 隐藏图像，

.img_mask{
  visibility:hidden;
}

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

you should hide the img using display:none or visibility:hidden like

.img_mask{
  visibility:hidden;
}

afterward show the images using .show()

回复收藏 0 原文

会傲 2024-12-09 03:28:36

你的逻辑性需要提高。您应该先隐藏img，然后再将其附加到DOM，等待条件满足然后显示它。

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

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

Your logical need to be improved. You should hide the img first before it appended to DOM, waiting for the condition meets then show it.

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

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

回复收藏 0 原文

凑诗 2024-12-09 03:28:36

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

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

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

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

回复收藏 0 原文

烟若柳尘 2024-12-09 03:28:36

如果在声明最后一项后立即将脚本嵌入到 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 中并通过脚本显示。

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

Does it work if you embed the script into the HTML, immediately after the last item is declared?

<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>

This works for me, but I don't have IE8 installed to test it on.

I would argue that it is better to have the images visible in the HTML and hide them through the script (as you are doing), rather then to have them hidden in HTML and revealed through the script.

If the rendering device has scripting disabled, it is better to see the images badly aligned then not at all.

回复收藏 0 原文

放低过去 2024-12-09 03:28:36

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

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

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

The document.ready() function works just as the name implies. Document refers to the DOM, or Document Object Model, while in this case “ready” refers to when the DOM is registered by the browser.
So your code will wait till every thing is ready and starts working on it. Thats why you're facing some delay.

回复收藏 0 原文