iPad and jQuery hide() on page load has big delay
I have written a bit of jQuery that hides a certain element on page load, which works seamlessly on browsers on a mac, but when I try it on the iPad there is a noticable poping of the page开发者_开发百科 as the element appears and then disappears. Is this the iPad that is causing the problem, in which case I may have to rethink my page loading process.
To hide the element I am using:
$(document).ready(function() {
$('#element').hide();
});
Other jQuery later shows the element when I click on things so I could possible hide it using css but that won't degrade nicely on the absence of js.
Why don't you just a class to the html tag right after you declare it (with javascript) and use CSS to hide the element ?
Javascript
<script type="text/javascript">
document.documentElement.className = 'js';
</script>
Css rule (in a stylesheet, or in the head as well)
.js #element{display:none;}
just add the above inside the page <head> tag and you should be set.
Demo: http://jsfiddle.net/C2jdX/
To isolate the cause, and work around it if it turns out to be intractable, you might consider hiding it using inline script just before the closing body tag, rather than via the ready handler. E.g.:
<!DOCTYPE html>
<html>
<head>
<!-- blah blah blah -->
<script src='path_to/jquery.js'></script>
</head>
<body>
<!-- blah blah blah -->
<div id='element'>...</div>
<!-- blah blah blah -->
<script>
$('#element').hide();
</script>
</body>
</html>
As long as the script follows the closing of the element in question, it should be found.
Live Example
I assume there's a good reason for hiding it only when scripts run (progressive enhancement, that kind of thing).
References:
- Google Closure Library guys on why they don't need a
readyevent - YUI's best practices
加载中,请稍侯......
精彩评论