jQuery - Best way to hide element? ( to prevent the element from flashing before actually hiding it )
I remember that at some point Opera ( Mostlikely it was Safari instead. ) had a problem that if you used .hide() on element, it would flash briefly before it would actually hide the element.
Now if you dont want to ignore those who for some reason dont have js on in their browser you cant really use CSS to set display: none; in that element to hide it and then use js to for example fade it in.
I recently noticed that this didnt happen anymore in Opera. So, i'd like to know if this still does happen in some browsers incase ive missed that.. And asuming that this would happen. What way would be the safest way to do it? ( of course ignoring the css method in this case. )
js .hide()
js .addClass('hide') css .hide { display: none; }
Or something else?
Edit:
js开发者_Go百科 element.style.display = "none"
js $(element).css({display:"none"})
Edit2: This issue might have been in Safari actually. I also got thinking that newer jquery versions might have fixed the issue.. As i think there was a few bug reports about this problem on jquery website but i couldnt find those bug reports ..Or it could still be that newer browser version fixed it.. Not sure.
Edit3:
So, I did indeed find a lot more about this when I started searching for this bug in Safari rather than Opera. Though i cant say for sure that it never happened in opera as well...
It would seem like this problem does not exist anymore and that it is safe to use .hide() but what I learned was that this $(element).css({display:"none"}) did fix the problem when the problem was still out there.
You should always rely on using jQuery hide() method to hide any element because it takes care of all the browsers. I haven't seen any issues in Opera though.
Even to show any element you should always rely on using show() method again for the same reason.
E.g. To show a tr element if we say tr.css("display", "block") it will not work in Firefox because it is a table row and it needs to be specified as .css("display", "table-row"). But if you use tr.show() you dont have to worry about any browser.
You could use noscript to provide an alternative element that is always displayed, whilst the JS element starts off hidden.
Or you could use start out with a class with no CSS rules and then get a script to alter the CSS class rule to make sure the element starts off hidden.
<html>
<head>
<style type="text/css">
p.start-hidden-if-js-enabled {
}
</style>
<script type="text/javascript">
document.styleSheets[0].cssRules[0].style.display = "none";
</script>
</head>
<body>
<p class="start-hidden-if-js-enabled">
This text will be hidden if javascript is enabled.
</p>
</body>
</html>
Simply add a display:none in a stylesheet or put an inline style="display:none" on the element.
加载中,请稍侯......
精彩评论