0

I want to execute a function when the element with ID #container has loaded on the DOM.

I can start populating #container immediately after it has loaded, and not wait for the whole DOM to load as with document.ready().

I am using require.js to load my scripts, and backbone.js for organisation.

What is my best approach?

Randomblue
  • 112,777
  • 145
  • 353
  • 547
  • Have you tried `$(window).load()`? Or put a ` – Jared Farrish Dec 28 '11 at 01:33
  • 1
    Put your `script` tag right after that element definition? ;-) – zerkms Dec 28 '11 at 01:33
  • I think you're going to have to choose: do you want a "partial ready", which is easy and reliable if done with an inline script right after the element, or do you want to strictly keep _all_ of your script organised backbone.js/require.js? – nnnnnn Dec 28 '11 at 02:47

3 Answers3

8

I believe the easiest would be to just put your script exactly after the #container.

Like this:

<div id="container"><!-- content --></div>
<script>
  var container = document.getElementById('container');
  // do stuff with container here
</script>
bennedich
  • 12,150
  • 6
  • 33
  • 41
  • I can't really do that. I'm using fancy tools like require.js, backbone, etc. This goes against the design of my app. – Randomblue Dec 28 '11 at 01:47
  • As far as I know, this would be the best option. The other alternative I can think of is to poll the DOM periodically and check for the existence of the element which is definitely uglier than this solution. – Anurag Dec 28 '11 at 01:55
  • The only other method I can think of would be to put a script (in the head for instance) which uses `setInterval` until `document.getElementById('container')` returns the element. But that is really ugly. – bennedich Dec 28 '11 at 01:55
  • @bennedich - Even that I don't think will necessarily work: http://jsfiddle.net/XvZ2F/ – Jared Farrish Dec 28 '11 at 01:57
  • @Randomblue - you should also state the reasons for not waiting to wait for the entire DOM to load. Is your page really big in size? If performance is your ultimate objective, then I'd suggest you look at the Google home page. It inlines scripts all over the page, and sometimes there's a very good reason to do it. Imagine a page with a search box that is supposed to focus on load, but if the page load is slow, a user could have typed the query in the box, and unfocused it, but on page load it would focus back again. In that case, inlining the script results in a much better user experience. – Anurag Dec 28 '11 at 02:02
  • @Anurag: That's a good point. I'm just wondering if there is a nicer way which fits nicely with the tools I'm using. – Randomblue Dec 28 '11 at 02:03
  • @JaredFarrish - you have to select the element inside the timeout callback. If you select it before, then it won't be found for sure because the runtime hasn't parsed the `div` element yet. Also, it should be a `setInterval` instead of a `setTimeout` because we want to keep checking. – Anurag Dec 28 '11 at 02:05
  • Yes (ahem), you're right, I was imagining that was a closure. Whoops. However, don't use `setInterval()`. http://jsfiddle.net/XvZ2F/4/ – Jared Farrish Dec 28 '11 at 02:07
  • @Jared: why not setInterval? Would you mind explain why the execution of setTimeout/setInterval is delayed? – bennedich Dec 28 '11 at 02:10
  • No problem. Read this answer: http://stackoverflow.com/a/731625/451969 `setInterval()` is considered "unreliable". I've just gotten used to not using it. – Jared Farrish Dec 28 '11 at 02:12
  • I'm not sure that `setInterval()` is "unreliable" so much as "reliably doing not quite what you might naturally think it is doing". Though having said that I'd use `setTimeout()` rather than `setInterval()` in this situation since you have to test whether to cancel it anyway and `setTimeout()` avoids needing to save a reference to cancel it with... – nnnnnn Dec 28 '11 at 02:42
0

Just place your Javascript after the desired element in the page, it will be parsed in order and executed right after the #container was parsed and "loaded".

<div id="container"> ... </div>
<script type="text/javascript" charset="utf-8">
    $('#container')...
</script>
deceze
  • 510,633
  • 85
  • 743
  • 889
0
<div id="container"></div>
<script>
$('#container').html('I am changed.');
</script>

$(document).ready(function(){
    alert('Is it changed?');
});

http://jsfiddle.net/SFmWa/

Jared Farrish
  • 48,585
  • 17
  • 95
  • 104