jquery - Trying to hide the document until it's updated with JavaScript -
this ready handling:
$(document).ready(function() { $(document).hide(); $('.foo').each(function(elem, i) { $(elem).text('so long , fish'); }); $(document).show(); }}; what i'm trying hiding document until ready on terms, seems show() function doesn't wait elements iteration.
by way, tried changing show() , hide() css('display', 'hide') , css('display', 'block') still, can text changing in eyes.
how make sure code ran before calling show()?
let's suppose fix hiding body or container element. won't trick, , here's why:
what happens during time after document (mostly) loaded before hide document?
that's right, document may displayed during time despite best efforts.
so instead use css class hides, say, body without javascript intervention. example:
<!doctype html> <html> <head> <title>test</title> <style> body.hide { display: none; } </style> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script> $(document).ready( function() { $('.foo').each(function( i, elem ) { $(elem).text( 'so long , fish' ); }); $('body').removeclass( 'hide' ); }); </script> </head> <body class="hide"> <div class="foo"></div> </body> </html> of course mean if javascript disabled, document won't visible @ all. if want have non-javascript fallback? in case instead. we'll hide html element instead of body because way know code work in head (the body element may not exist yet @ point), , hide if javascript enabled:
<!doctype html> <html> <head> <title>test</title> <style> html.hide { display: none; } </style> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script> $('html').addclass( 'hide' ); $(document).ready( function() { $('.foo').each(function( i, elem ) { $(elem).text( 'so long , fish' ); }); $('html').removeclass( 'hide' ); }); </script> </head> <body> <div class="foo"> content displayed if javascript disabled. </div> </body> </html> now have non-javascript fallback, document still hidden when javascript enabled, because of code adds hide class.
also note had parameters reversed in $().each() callback. (interestingly enough, order used makes more sense , indeed order used newer native .foreach() function. order in $().each() backwards - 1 of things seemed idea @ time mistake.)
Comments
Post a Comment