5

I'm building a single-page-application which (pre-)loads the content of different pages via ajax. when the user navigates, the app replaces the old content inside a specific tag with the new content (ajax data). this new content could be e.g. an article containing text and images.

my question is: is there an event that is fired, after replacing the content and every external resource of the new content is loaded? like a "dom ready" for a refresh of the DOM?

Philipp Kyeck
  • 16,652
  • 15
  • 72
  • 105
  • Perhaps this will help: http://stackoverflow.com/questions/1324647/can-javascript-listen-for-ondomchange-on-every-dom-elements – enhzflep Nov 20 '12 at 12:22
  • I don't think so any event is fired there.. But you can use the ajax call backs to do so. – mtk Nov 20 '12 at 12:24
  • @enhzflep I know when the node is inserted because I do it myself ;) so the `DOMNodeInserted` event doesn't help. @mtk but the ajax callbacks are fired when the html arrives from the server - I need an event after this content is attached to the DOM and the resources (images etc) are loaded. – Philipp Kyeck Nov 20 '12 at 13:02
  • Well, in that case (I was mistaken when I though there was a DOMContentChange event), one would suppose that the way to do it would be the 'normal' way - i.e, count the elements that will require loading and attach an onload or onerror handler to increment the number of loads/fails. In any case, I'd do a test - I guess you'd have fewer elements than could be processed before the first resource loaded. I guess document.querySelectorAll('#conainerId img') would be my first port of call. It's likely you're aware of that and looking for a cleaner solution. :) Interesting question, btw. bookmarked. – enhzflep Nov 20 '12 at 13:57
  • @enhzflep yep, thought of that but a cleaner solution would be great. – Philipp Kyeck Nov 20 '12 at 14:17

1 Answers1

0

Yes, jQuery has a document.ready event that should work for you.

You can however replicate jQuery's event, if you don't want to import the library.

Edit

Turns out I wasn't paying attention.

No events are being fired when the DOM is modified, so it's not possible to add a listener on anything like that.

You will have to keep track of the modifications on the DOM, manually. You could add "callbacks" to the modification functions you use:

function addSomethingToPage(data){
    data.doSomething():
    domReady();
}

function domReady(){
    //re-usable "callback"
}
Community
  • 1
  • 1
Cerbrus
  • 60,471
  • 15
  • 115
  • 132
  • 2
    jQuery's `document.ready` is only called once at first pageload - so this doesn't work. – Philipp Kyeck Nov 20 '12 at 13:03
  • the problem (or question) is still the same: when exactly to call `domReady()` because `data.doSomething()` is async (image loading etc). like enhzflep mentioned [in his comment](http://stackoverflow.com/questions/13472522/html-js-is-there-a-page-loaded-event-in-single-page-applications#comment18433814_13472522), I can add EventListeners to every `` but I was hoping for a cleaner solution ... – Philipp Kyeck Nov 20 '12 at 14:21
  • If such a cleaner solution exists, I'm not aware of it, I'm afraid. – Cerbrus Nov 20 '12 at 14:28