Hi there,

I have some java script menus created and I'm calling them from the <body onload> tag as follows:

<body onload="initjsDOMenu()">

Because of this, the menu is the last thing to load on the page. I want it to be the first thing to load. Anyone know what I can do?

Thanks for any help,
Maj

Dani AI

Generated

Short answer: having the initializer on body onload waits until everything (images, styles, subframes) is finished, so the menu will appear late. You can make the menu visible earlier in three safe ways: render the menu HTML/CSS server-side so it paints immediately; run the JavaScript as soon as the DOM is parsed (not waiting for full page load); or load the script in the head but mark it non-blocking and execute only after the elements it needs exist.

A practical, cross-browser pattern that runs your init as soon as the DOM is ready (and avoids the "object expected" errors warned about) is to attach to DOMContentLoaded with a small ready helper:

function onReady(fn){
  if (document.readyState === 'interactive' || document.readyState === 'complete') return fn();
  if (document.addEventListener) return document.addEventListener('DOMContentLoaded', fn);
  document.attachEvent('onreadystatechange', function(){ if (document.readyState === 'complete') fn(); });
}

onReady(initjsDOMenu);

If you prefer keeping scripts in the head, use an external file with defer so it downloads early, executes after parsing, and preserves order:

<script src="menu.js" defer></script>

Practical tips: put critical menu markup or minimal CSS high in the document so the browser can show it immediately (server-side rendering or inline critical CSS). Avoid overwriting window.onload — use event listeners — and do not use async for scripts that depend on DOM order. If you move initialization earlier and see console errors, the ready helper above or placing the init call immediately after the menu markup is the simplest fix.

This reconciles the posts: and were right that you can run code from the head, was right to caution about DOM availability, and ’s point about script tag placement is true — the key is ensuring the DOM is ready before the initializer runs.

Recommended Answers

All 6 Replies

instead of sticking it in the body onload, have you tried calling it in the header of the page:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="Javascript">
function some_function()
{

}

some_function();
</SCRIPT>
</HEAD>
<!-- The Rest Of The Page -->

Hi there,

I have some java script menus created and I'm calling them from the <body onload> tag as follows:

<body onload="initjsDOMenu()">

Because of this, the menu is the last thing to load on the page. I want it to be the first thing to load. Anyone know what I can do?

Thanks for any help,
Maj

call this function at the javascript section under head tag.
<head>
<javascript>
function();
</javascript>
</head>

<javascript>
function();
</javascript>

What language is that written in? It isn't HTML or XHTML because they use <script type="text/javascript"> to call Javascript.

thats what they mean... you can call a javascript function from anywhere on the page, as long as it is in the script tags you describe.

Most times code within onload needs to be there because it references elements of the page that need to be loaded beforehand in order to be able to reference them. Moving the onload code to anywhere else will probably result in "object expected" errors because the part of the page that the script references hasn't loaded yet.

What language is that written in? It isn't HTML or XHTML because they use <script type="text/javascript"> to call Javascript.

its just html code ...............sorry for writing it like that.............my motive was to just guide the way it would work..................

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.