I noticed on my website that all jQuery functions and plugins I use start loading after the main webpage is loaded. This is no big problem, but the thing is I use jQuery to style my <forms> elements and hide error messages, so when user accesses a page for about 1 second they see ugly form and all messages and than jQuery loads it looks fine.
I included my jQuery plugin calls and functions before the </head> tag and wrapped them into
$(document).ready(function() { //My Code Here });
Code example:
<script type="text/javascript">
$(document).ready(function() {
//Form stylin
$('form').call_form_styling('form' , { labels: true, });
//Hide error div's with class = "error"
$('.error').hide();
});
</script>
<head>
<body>
<form>
<!-- Suff like inputs here -->
<div class="error">error</div>
<form>
<! -- other code bla bla -->
</body>
So could you please suggest any solutions to load jQuery functions and plugins before page is shown to a user, so they don’t see ugly stuff.
If you have a read of what jQuery’s
.hide()does, you’ll see that it simple sets the element’s display state to none. Therefore, one way around this issue would be to set some inline styles for your elements that you want to hide on page load, that way you can then use jQuery to fade them in again, eg:<div class="error">error</div>becomes<div class="error" style="display: none;">error</div>