window.onload equivalent after modifying the DOM?

Question

When a page first loads we can use window.onload to make sure that all resources have loaded before we do something.

My question is, if we modify the DOM (e.g. inserting some html based on an ajax request), is there any event that will fire when the document is in the 'loaded' state again? (e.g. when the html inserted contains multiple images).

(Solution with jQuery would be fine).

@Felix - I don't want to detect changes to the DOM, I want to detect when resources have been loaded after I change the DOM. All of those questions you reference are about detecting changes. — UpTheCreek, Mar 29 '13 at 09:56
Maybe you should explicitly state this then. The DOM being ready and all resources being loaded are two different things. — Felix Kling, Mar 29 '13 at 09:57
Just to clarify, since you seem to make no distinction between load and ready, in jQuery the .load() happens when the page is completely rendered, while .ready() happens as soon as the DOM hierarchy is constructed. If your code relies on loaded assets (for example, you need to get dimensions of an image), you should use .load() to ensure that your code is executed when all needed assets are available. Otherwise you can use .ready() to speed up things, since your code will be executing while rendering. — excentris, Mar 29 '13 at 09:57
@FelixKling - question edited. Please could you remove the close for these unrelated questions. — UpTheCreek, Mar 29 '13 at 10:04
possible duplicate of [jQuery Ajax wait until all images are loaded](http://stackoverflow.com/questions/4774746/jquery-ajax-wait-until-all-images-are-loaded) — Jashwant, Mar 29 '13 at 10:09
and http://stackoverflow.com/questions/10822619/jquery-wait-till-ajax-page-is-fully-loaded. I prefer `imageLoaded` for images and `load()` on particular `div` for other things. — Jashwant, Mar 29 '13 at 10:11
@Jashwant - thanks! I agree those are pretty close to my question ;) — UpTheCreek, Mar 29 '13 at 10:12

Nadav Ben-Gal · Accepted Answer · 2013-03-29T10:05:32.843

2

The short answer: NO.

The long answer: if you know what you are looking for you can use mutation observers (https://developer.mozilla.org/en-US/docs/DOM/MutationObserver). it is only support in new browser, and in some version of chrome it has memory leaks when used with closures.

BTW, document.ready doesn't tell you if all (or any..) of the resources were loaded. it only tell you well, that the dom is ready (that is the load function, which will only fire after all resources (well, any resources that isn't requested using a javascript) were downloaded).

edited Mar 29 '13 at 10:05

answered Mar 29 '13 at 09:56

Nadav Ben-Gal

549
3
13

is there any update on this (`The short answer: NO`)? – David Portabella Jul 04 '19 at 13:05

score 0 · Answer 2 · edited Mar 29 '13 at 10:00

0

You can use .done().

Description: Add handlers to be called when the Deferred object is resolved.

Also there is jQuery plugin See Here

edited Mar 29 '13 at 10:00

SeinopSys

8,787
10
62
110

answered Mar 29 '13 at 09:56

Dipesh Parmar

27,090
8
61
90

1

Not sure I follow Dipesh. I can attach a done to the promise from the ajax call, but this will only tell me when I have the data, not about any resources that have started to load after I insert this into the DOM. Or do you mean something else? – UpTheCreek Mar 29 '13 at 10:03

bart s · Answer 3 · 2013-03-29T10:33:25.870

I would say YES (I do not know if this is supported by all browsers. I use it in safari and chrome)

Testcase you can find here : http://maakmenietgek.nl/testcases/domready/ Please note that I cannot get it work in a fiddle, that's why a standalone testcase

The index.html looks like this

<!DOCTYPE html>
<head>
  <title>Testcase</title>
  <script src="jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('#clickme').click(function() {
        $.get('ajaxdata.html', function(data) {
            $('#addhere').html(data);
        });
      });
    })
  </script>
</head>
<body>
  <p id="clickme">clickme</p>
  <div id="addhere">
  </div>
</body>
</html>

The data loaded with the $.get call looks like this

<p>added data</p>
<script type="text/javascript">
    $(document).ready(function() {
        alert('added data');
    });
</script>

The alert shows after the html has been added to the DOM

window.onload equivalent after modifying the DOM?

3 Answers3

Linked