I'm stumped with a very simple question. Since the <body> tag always precedes content, when does body onload execute; at the opening tag or at the closing tag? Can body onload advance to a point where it ignores code inside of it?
And so then maybe I skipped this part at the very basics of coding... If I open a tag with say, a style property, and don't close it, will it still execute?
Body itself is the content of your page, no pre-loading as such..
So if you run an onload event, this will trigger once the content of your body is ready and generally has rendered itself or is about to.
In general, you would create any content within the body tag or using a script at run time and then run a onload script to finalise everything.. This could be use to add javascript hover effects or to hide a progress bar for loading.. Generally once that script is done. The page should be ready for the user.
Code will never be ignored ever (with exception to crashes/cancelled requests), But it depends if the code is taking effect like it should.. You element might not be ready if your adding it dynamically..
Another big issue to watch out for while developing is cache, this is a nasty creature that will waste hours of your time...And last but not least, use the browser console to debug at various points and test what is happening.
As for closing tags, If you mean you you do not put the > character at the end, it will break the page.. In the case of tag like link.. But for a script, you must close it upto the point of the < /script > tag
Related
I have read a StackOverflow answer here, as it says:
Also, place the <script> tags at the bottom of the page, even after
</body>, but before </html>. This will load the scripts last and load
the ads last.
Is it real? Why it would work?
Loading a "classic" script is synchronous by default. This means that when the script tag is encountered, the HTML parser will wait for this script to be downloaded and executed before it is able to continue parsing what follows.
So, yes, putting your script at the end of the markup will allow the parser to have gathered enough DOM information and stylesheets and everything before it gets blocked fetching that script.
The renderer may even be able to pre-render the page while this script is being fetched, making it looks like the page did load faster.
But no, placing it after the tag won't make anything "speed up" in comparison to placing it before. This will just create an error in the parser, which will have to move it back inside the <body>, and it will make your page fail to pass validators. (Though to be fair, this was not the claim made in that quote).
Also, note that just doing this that way will still block the parser synchronously, and thus, all the asynchronous tasks that should happen at the end of the parsing will still get delayed.
So the best if you want to load a script that doesn't need to execute synchronously is to load it with the async attribute.
The purpose of adding at bottom of the page is, controlling the compile-time errors.
Consider the scenario, we have written some addClass() functionality to an ID element, if we include this in top it can't find out the Id element.
So we are adding it to the bottom of the page, once the DOM has been loaded.
TL:DR; faster? No, not really. The impression of loading faster? Yes.
When the browser is rendering the DOM and it comes across a <script> tag, it must halt, execute the JavaScript, then continue. This is because the JS could be doing anything, like appending another element, where the order is necessary. If it queued the script for loading later or made it async, by the time the script finished executing the state of the DOM might not have been the same when the script first started loading.
E.g, consider the following:
<p>Hello</p>
<script>document.body.innerHTML+="Wor"</script>
<p>ld!</p>
In this case, the order of the tags is necessary. If the browser queued the script to be loaded later, the last paragraph tag may have been rendered before the script inserted Wor into the body innerHTML, and you would end up with:
Hello
ld!
Wor`
But what if your script is doing some intense work that could lag out the browser for a few seconds? If you put the script tag in the middle of the body, half the page would be rendered, the script would be run, then the other half would be rendered (after script execution finishes). This gives the impression that the first half loads immediately, but the second half took a few seconds to load.
This causes a bad user experience. Instead, what's recommended is to move the script tag to the bottom, so only once the browser has finished rendering the elements should the script be run. This isn't faster, it just gives the impression of being faster.
$(function(){}) is the the same as jquery's $(document).ready so I am wondering if I can put it into body
instead of head ?
I only see the act of putting script at different section of the page as a matter of executing it at different time. It is true? Can I put script in a div in the middle of the page? Will it affect how DOM is loaded?
I only see the act of putting script at different section of the page as a matter of executing it at different time. It is true?
Yes, but the script you're talking about just makes a single function call (to ready). The callback will get called later, when the DOM is ready, either way.
Can I put script in a div in the middle of the page?
Yes. But again, if the script in question is just calling ready (directly, or via the shortcut), it doesn't much matter. I would discourage you from littering scripts all over your markup; best to try to keep the two largely separate.
Will it affect how DOM is loaded?
Only if you use document.write within the script (and even then, it doesn't affect how the DOM is loaded, but may affect the content of it).
If you can choose where the script tags go (e.g., you're not writing a JavaScript library or jQuery plug-in, your script is on a page you control), there's little if any reason to use ready. Instead, put your script tag at the end of the page, just before the closing </body> tag. References:
Google Closure engineers on when the DOM is ready
YUI Best Practices for Speeding Up your Website
The purpose of document.ready is to wait till the DOM is ready, if you put your scripts just before the body closing tag or just after the html that is being modified then you don't need document.ready although it should still work.
This will work but it is bad practice. If you can you should put your scripts at the end of your webpage rather than in the head. Unless of course you have something (like a document ready function) that you need to load first.
Do you know if it is possible to make sure that a JavaScript script site is ran first in a web page?
For the context, I'm trying to tag every span before another library (just like cufon) kicks in and messes with the original content. Since it's not possible to use onLoad() on spans, it's the only way I can see to do that on the client side.
Order of precedence is determined by the order in which things load.
Head tag scripts (in the order they are listed)
Scripts & other event attributes in the order they appear in the code.
Body onLoad
I did have #2 & #3 mixed up - to clarify the body onLoad event fires after the entire body (scripts included) loads
Also, scripts altering <span> tags will have no effect if placed in the head tag (unless they are a function) since the script runs when it is loaded, and when the head loads, the body & span tags haven't loaded yet.
Place <script> tag in page source after content that you need to modify, but before any other scripts. Scripts run in same order that their tags appear on page.
Sorry I couldn't articulate my question accurately.
I have a jQuery script that needs to be placed below the HTML element it is applied to and not in the head. IE 6 and IE 7 are generating operation aborted message since the script is not a directly child of Body tag. This seems to be a well known bug on IE.
I do not have the privilege to keep the script tag as a direct child of Body tag. Either it should be inside tag or it should be in the head. If I have it in the head, it obviously doesn't trigger since it should be below the HTML element it is applied to.
What are my options in this case?
Thanks!
Put it in the head, and move your code inside a document.ready handler, like this:
$(document).ready(function(){
// your code here
});
This way, your code will only run after the full HTML has been parsed.
You can write the code within head...Just need to write it inside the document ready block, so that it gets executed only after your DOM is ready..
$(document).ready(function(){.....your code......}
Hope that helps. Thank you.
Twitter generates me box code to insert on page: http://pastebin.com/5TgkL5vP but on slow connection it prevent page from loading. Is there any way to add "Loading..." and make it async? (I know about iframe but its awful way)
There is a solution in here;
http://od-eon.com/blogs/stefan/asynchronous-loading-twitter-widgets/
$(window).load(function(){
$.getScript('http://widgets.twimg.com/j/2/widget.js', function(){
$.getScript('/media/js/twitter.js', function(){
$('#twtr-widget-1').appendTo('#twitter_p')
})
})
})
To delay the loading of the twitter widget you could load it after your whole page is loaded. You could use the window's onload event handler to start loading the twitter widget once your page has been downloaded.
Or you could use a javascript library (like jquery) to run that code once you HTML is loaded but images and CSS and other assets are still loading: jquery's .ready() method does just that.
In case you don't want to use bare javascript (although recommended for learning) jquery (like others) does provide a .load() event that behaves just like the onload example on W3c.
In any case, with any of those two methods you could place a "loading..." text in a placeholder and then replace it with the widget once it's loaded.
You should try experimenting with both and see which one produces the best perceived results. Sometimes you want the page's content to load blazingly fast, in that case you should hold all external content from being loaded until the content is loaded (using onload or .load()), while sometimes you want everything to be loaded more or less at the same time (using .ready()).
I hope it didn't come out backwards :D.
The solution explain by od-eon.com is OK but for IE the CSS is not correctly added because it tries to add CSS in a window onload event. This event is fired asynchronously so no CSS is added.
The line $('#twtr-widget-1').appendTo('#twitter_p') is not useful.
You must not add a CSS position attribute to the div which will contain the box because nothing is displayed in this case. If you want to add this box in an absolute div you must add an empty div in it and pass the div's id in parameter.