jQuery hide() method doesn't immediately take effect in IE8?

Question

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

Answer 1

You can't guarantee that javascript will run before things in the page are displayed. You just can't and IE is the worst at it.

You have a couple options to solve your problem:

1. Use a CSS stylesheet rule that makes the images hidden initially and then use javascript to display only the aligned ones.
2. Don't put the mis-aligned images in the DOM - only put aligned ones in. This might require changing how your page HTML works. The images could be in a javascript array and you load them via JS and only insert ones that will align.
3. Hide the image container until you've run your javascript and weeded out the mis-aligned images.

If you care about sites that don't have javascript, you may also want to display the initially hidden images in a <noscript> tag using a CSS rule in <style> tags

Answer 2

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

.img_mask{
  visibility:hidden;
}

afterward show the images using .show()