CODEWITHSUNDEEP
javascriptjquery
LNA
LNA

Reputation: 1447

What's the difference between using onload in the DOM and .load() in jQuery?

For example:

<iframe onload="functionName('id-name', 'http://domain.com');"/>

versus

$('#id-name').load(functionName('id-name', "http://domain.com');

(Actually... is my jQuery right?)

UPDATE: Thanks, all, for the responses. I'm using:

$('#id-name').load(function() {
    functionName('id-name', 'http://domain.com');
});

ETA: "body" was supposed to be an iframe (oops), so am not using window.load.

Upvotes: 1

Views: 1433

Answers (3)

Barmar
Barmar

Reputation: 780655

First of all, the syntax of your jQuery is wrong. The jQuery that's analogous would be:

$('#id-name').load(function() {
    functionName('id-name', "http://domain.com');
});

To bind an event handler, you have to supply a function, you were actually calling the function at the binding time.

However, this is not equivalent for a few reasons.

First, you're binding the handler to the #id-name element, not the body (unles you also did <body id="id-name">. So it wouldn't run when the body is loaded, but only when that specific element is loaded. In general, per-element load handlers are only useful for elements that have separate sources that get loaded asynchronously (e.g. images and iframes); they allow you to detect and take action when those elements are filled in. This is particular useful if you're changing the source dynamically.

Second, ssuming your jQuery code is in the $(document).ready(...) handler, as most jQuery code is, it doesn't run until after the DOM is fully loaded. By that time, the body's onload event has already been triggered. Any handlers added at this time will not run for elements that were already loaded. I've created a fiddle that demonstrates this:

<body onload="alert('inline body onload');">
    <div id="foo"></div>
</body>

$(document).ready(function () {
    $("#foo").load(function () {
        alert("foo onload");
    });

    $("body").load(function () {
        alert("jquery body onload");
    });
});

Only the inline body onload alert fires.

However, if you just want a jQuery equivalent to putting a function call in the <body onload=""> attribute, the $(document).ready() handler is considered analogous. See jQuery equivalent of body onLoad, the first question in the Related sidebar.

However, as Gloserio's answer says, $(window).load(...) does work, despite the timing (it's recognized specially, similar to $(document).ready()). This modified fiddle demonstrates it.

Upvotes: 4

Akheloes
Akheloes

Reputation: 1372

$(window).load(function () {
              functionName('id-name', "http://domain.com');
            });

Seems to be a fair enough equivalent of body's load event.

Related :

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

onload is a DOM event that is triggered when the page begins to load.

.load() is a shortcut to an AJAX call using jQuery.

They really have nothing in common...other than having "load" in their names.

Upvotes: -2

Related Questions