inline vs. onload events

[djp1988]

Since reading DOM Scripting, i have abandonned the inline javascript, opting to script events in functions onload in an external js file, but there is a problem, some of the pages using events such as onclick or onmouseover are found on very heavy pages, and so these event's don't work until the page's photos/images have finished loading, so can this be a tolerable case to allow for inline events?

[Ingolme]

Inline code isn't bad at all. It work precisely the moment it loads. I usually put it inside or right after the elements I'm trying to refer to.Here's a good example: when the Javascript has to wait for the window to load, the user will be confused because the page is telling him that Javascript is not enabled.The Javascript will act immediately in the second example, and the user won't have that problems.JS on window load event:

<script type="text/javascript">window.onload = function() { document.getElementById("nojs").style.display = "none";}</script>. . .<div id="nojs">Javascript is not activated</div><img src="file" alt="This is a very BIG image that takes long to load">

JS right inside the element:

<div id="nojs">  Javascript is not activated  <script type="text/javascript">  document.getElementById("nojs").style.display = "none";  </script></div><img src="file" alt="This is a very BIG image that takes long to load">

[djp1988]

Oh yes I know that it works fine and all, only it is better practise to completly seperate mark up from style and javascript

[justsomeguy]

It's also a good practice to keep total page size under 500k, but not a lot of people care about that. If you have a large page that is going to take a while to download it doesn't help much to add a Javascript file as another file to download just to remove the Javascript code from the markup. If you can load your Javascript file on another page so that it gets cached before you load the big page then you can solve that problem, but if you need to wait until everything on the page loads in order for Javascript onload events to fire, and the page is really big, then there's not a lot you can do about that. Either make the page smaller, or don't use onload.Following guidelines like separating Javascript from markup, or not using tables for layout, or adhering to XHTML strict sound good and all, but they shouldn't take precedence over the user experience. If removing the inline Javascript causes your page to be non-user-friendly, then put the inline Javascript back. If a CSS layout causes jerky scrolling on lower-end machines, switch to a table. If you need an iframe to do AJAX uploads, don't use XHTML strict. The guidelines are good, but don't sacrifice usability to meet an arbitrary guildeline. When you're doing tech support on your site with a customer and they say "nothing is working when I click on it" and you say "well maybe so, but there's no Javascript in the HTML!", that doesn't really satisfy the customer as a valid reason to not have the page work.

[djp1988]

Okay, but the markup loads okay, what makes my page so long to complete loading is because I have 600 * 400 images, and many of them, so I can see the piece of html with some onload js attached via an extermnam file but I must wait for the images before the js works, instead of onload is there anything for only mark up such as onMarkupload ?lol that sounds so cheesy, but you understad what I am looking for.

[aspnetguy]

Firefox has an event like that but IE's version is a bit quirky and sometimes doesn't fire. You could use a framework like JQuery for that and not have to worry about any compatibility issues

$(document).ready(function() {  //do your stuff here});

or you could put the javascript directly after the markup that is required to be loaded

<div id="test"></div><script type="text/javascript">  document.getElementById('test').innerHTML('loaded now!');</script>

[justsomeguy]

You can put an onload event on any element, it doesn't *need* to go on the body.But you're missing my point. If you're waiting for the load event to fire, no matter how you do that, you still have to wait for everything to load. If you used inline code that gets executed as soon as it gets downloaded like aspnetguy showed then you wouldn't have to wait. That's what I was talking about in my post above about not letting arbitrary guidelines negatively impact the user experience.