CODEWITHSUNDEEP
javascriptjquerycssinternet-explorer-8show-hide
catandmouse
catandmouse

Reputation: 11809

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

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

Upvotes: 3

Views: 2922

Answers (7)

Rady
Rady

Reputation: 35

try other methods to speed selector image.

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

Upvotes: -1

Vinayak Phal
Vinayak Phal

Reputation: 8919

$(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.

Upvotes: 0

Rafay
Rafay

Reputation: 31033

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

.img_mask{
  visibility:hidden;
}

afterward show the images using .show()

Upvotes: 1

Andrew Shepherd
Andrew Shepherd

Reputation: 45252

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.

Upvotes: 0

jfriend00
jfriend00

Reputation: 707436

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

Upvotes: 3

Chris Newton
Chris Newton

Reputation: 171

You could use the .ready function to hide it on load and then display the other stuff following that?

Look into the jquery .ready() function ...

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

Kind of like 3nigma and.. jfriend said..., set the element to have an initial display: none; and then have it show in an event or delay... could help smooth things out?

Upvotes: 0

wukong
wukong

Reputation: 2597

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

Upvotes: 0

Related Questions