Load jQuery script after JavaScript script has finished

Question

Similar to the way jQuery loads after the document has loaded I need a certain bit of jQuery after a JavaScript script has FINISHED.

I am loading contact data from Google Data API and the div where the data shows up needs to be completely loaded (by the JavaScript) to be accessible by the jQuery if I'm right.

Is there any way to do this?

after javascript has finished doing what? and what are you trying to do exactly? — Victor, Feb 02 '11 at 23:48
What exactly do you mean by, "after a JavaScript script has finished"? Do you mean, after some particular JavaScript function call has returned? — Pointy, Feb 02 '11 at 23:48
One thing that's confusing things for me is that the term, "a JavaScript" doesn't necessarily make a lot of sense; it's essentially the same as, "a Python" or "a PHP" or "a Ruby". JavaScript is a programming language, so while it's easy to imagine what someone might mean by using the term "a JavaScript", it's hard to know exactly what's right because the term is essentially meaningless. — Pointy, Feb 02 '11 at 23:50
I am loading contact data from Google Data API and the div where the data shows up needs to be completely loaded (by the javascript) to be accessible by the jQuery if im right. — nkcmr, Feb 02 '11 at 23:50

score 5 · Accepted Answer · answered Feb 03 '11 at 01:58

Let's say you're waiting for Google Analytics to load. Now, you know that when Google Analytics loads, _gaq will be registered on the DOM. So, barring all other (better) asynchronous options, you can create a function that waits for the existence of _gaq:

waitForGaq = function(fn, attemptsLeft) {
    var tick = attemptsLeft || 30; 

    if (typeof(_gaq) != 'object' || !_gaq._getAsyncTracker) {
        //_gaq isn't registered yet
        if (tick > 1) {
            //recurse
            setTimeout(function() {
                waitForGaq(fn, tick - 1);
            }, 100)
        }
        else {
            //no ticks left, log error
            log('failed to load window.gaq');
        }
    }
    else {
        //gaq is loaded, fire fn
        fn();
    }
}

So, any code needs to run AFTER _gaq is registered, you can add to the page thusly:

waitForGaq(function() {
    //here's all my code...
});

To reiterate: recursing like this is only necessary if the script that you're adding doesn't offer an asynchronous way of interacting with the library. Google Analytics, for one, is kind of a moot example as it offers a cleaner approach:

http://code.google.com/apis/analytics/docs/tracking/asyncTracking.html

score 1 · Answer 2 · answered Feb 03 '11 at 02:09

1

Try head.js

It allows to define exactly when (after specific script or after all of them have been loaded) you want to execute particular piece of code.

Not to mention it is by itself very neat.

answered Feb 03 '11 at 02:09

Krule

6,468
3
34
56

score 0 · Answer 3 · answered Feb 02 '11 at 23:48

0

inject a tag directly after the original with the jQuery code you need to run

<script src="foo" id="bar">

$("#bar").after(
    $("<script>").text("some code")
);

answered Feb 02 '11 at 23:48

Raynos

166,823
56
351
396

score 0 · Answer 4 · answered Feb 02 '11 at 23:50

0

if i understand correctly, you want to do something like:

<script>
// your javascript code
</script>
<script>
//your jquery code
</script>

answered Feb 02 '11 at 23:50

Victor

4,721
1
26
31

1

I think he's talking about waiting for objects to be loaded on the DOM asynchronously? – Evan Nagle Feb 03 '11 at 02:00

Load jQuery script after JavaScript script has finished

4 Answers4

Linked