Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #12758 > unrolled thread

Best way to execute a function after a page is fully loaded?

Back to article view | Back to comp.lang.javascript

Contents

  Best way to execute a function after a page is fully loaded? Guerino1 <fguerino0@gmail.com> - 2012-03-15 07:18 -0700
    Re: Best way to execute a function after a page is fully loaded? Hans-Georg Michna <hans-georgNoEmailPlease@michna.com> - 2012-03-15 16:06 +0100
      Re: Best way to execute a function after a page is fully loaded? Guerino1 <fguerino0@gmail.com> - 2012-03-15 09:44 -0700
        Re: Best way to execute a function after a page is fully loaded? "J.R." <groups_jr-1@yahoo.com.br> - 2012-03-15 22:31 -0300

#12758 — Best way to execute a function after a page is fully loaded?

Hi,

I'd like to automatically execute a function after all the HTML body elements have been loaded?  I know there are a number of way to invoke functions (based on events and so on).  I'm looking for opinions on what the group things are the best ways to do so.

For example...

<body>
  <div id="div_1"></div>
  <div id="div_2"></div>
  <script>
    // <----- Would like to "always" execute function "foo()" at this point.
  </script>
<body>

Does anyone have any suggestions?

Thanks,

Frank

[toc] | [next] | [standalone]

#12759

On Thu, 15 Mar 2012 07:18:06 -0700 (PDT), Guerino1 wrote:

>I'd like to automatically execute a function after all the HTML body elements have been loaded?  I know there are a number of way to invoke functions (based on events and so on).  I'm looking for opinions on what the group things are the best ways to do so.
>
>For example...
>
><body>
>  <div id="div_1"></div>
>  <div id="div_2"></div>
>  <script>
>    // <----- Would like to "always" execute function "foo()" at this point.
>  </script>
><body>

<body>
  <div id="div_1"></div>
  <div id="div_2"></div>
  <script>
    foo();
  </script>
<body>

This works.

The question is also what exactly you mean by "fully loaded".
Images too? Videos?

To execute the foo function after the page, including all its
images, has been fully loaded, is this:

window.onload = foo;

Actually, if you are not sure whether another bit of JavaScript
also hooks on to window.onload, you'd better do it like this:

addEvent(window, "load", foo);

function addEvent(element, eventNameWithoutOn, eventListener) {
  try {
    element.addEventListener(eventNameWithoutOn, eventListener,
false);
  } catch (ignore) {
    try {
      element.attachEvent("on" + eventNameWithoutOn,
eventListener);
    } catch (ignore) {}
  }
}

(Taken from http://winhlp.com/node/610#e .)

There are more ways that also work well, like:
<body onload="foo();">

Hans-Georg

[toc] | [prev] | [next] | [standalone]

#12761

Hi,

I used the "<body onload="foo();">" recommendation and it worked fine.  I'm using it to execute a D3 related function to draw charts.

Thanks,

FG


On Thursday, March 15, 2012 11:06:13 AM UTC-4, Hans-Georg Michna wrote:
> <body onload="foo();">

[toc] | [prev] | [next] | [standalone]

#12781

On 15/03/2012 13:44, Guerino1 wrote:
> Hi,
>
> I used the "<body onload="foo();">" recommendation and it worked fine.  I'm using it to execute a D3 related function to draw charts.
>
> Thanks,
>
> FG
>
>
> On Thursday, March 15, 2012 11:06:13 AM UTC-4, Hans-Georg Michna wrote:
>> <body onload="foo();">

I think that the "onload" attribute of the body element <body 
onload="..."> is the best option to choose from; it is DOM-0 compliant 
and is more reliable than window.onload.

See 
<https://groups.google.com/forum/?fromgroups#!searchin/comp.lang.javascript/body$20onload$20$2Blahn/comp.lang.javascript/YSdI97GV2n0/CA-63Hvp3-4J>

-- 
Joao Rodrigues (J.R.)

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web