I have a jQuery script that changes the src attribute of an <img> and a few other page elements.
My script is hooked to the document-ready callback using $(). When I refresh the page I see the original content for half a second. I want to avoid that.
Is there a way for my script to execute after the DOM is ready but before it is rendered?
I don't think it's possible. These days, browsers begin rendering the UI before the DOM has finished building.
Not really, but you can fake it really well. Try setting the image to display='none'. After you've set the src attribute, you can reveal the image with $('#myImage').show().
hide the content you don't want to show with the CSS property:
display: none;
or if you don't want to mess up the layout of the page:
visibility: hidden;
It is kinda hard to delay the entire process of rendering the UI because a web page's performance is based on how fast the UI is rendered. tags usually block the rendering of the UI as the Javascript interpreter goes through your code, but that can happen so fast that you won't get the functionality you desire.
Btw, you can generally access an element immediately after it's closing tag. On larger, composite, elements (like divs) it may have already started rendering, though.
<img src="nothin.jpg" id="dynamicImage" />
<script type="text/javascript">$('#dynamicImage').hide();</script>
I would hide the body immediately after rendered...
<body>
<script type="text/javascript">document.body.style.display = 'none';</script>
And then show it after your jQuery code executes...
$(document).ready(function() {
// Whatever you gotta do here
document.body.style.display = '';
});
This will ensure your site is functional with Javascript disabled.