Hacker News Reader

Comment by spand | Hacker News Reader

If the author is watching this thread or anyone else. Would this work for elements not yet loaded by the browser before DOMContentLoaded?

View on HN

Yes. SentinelJS will trigger a watch for elements present when DOMContentLoaded fires and for elements added dynamically afterwards. In the Quickstart example, there's an element that is part of the initial HTML payload and a button to add more dynamically: https://jsfiddle.net/muicss/rbqLbjzf/

Thanks for the response and sorry. Maybe I was not quite clear. I was attempting ask if it would trigger the event handler before DOMContentLoaded (relevant on big document where DOMContentLoaded takes 10 seconds to fire) Example on a timeline:

  0. Browser starts parsing the document
  1. Sentiel.js loads (ie. by blocking script tag)
  2. Handler is set for .my-component (ie. by inline script tag)
  3. Browser parses <div class="my-component" />
  4. Handler is fired for .my-component
  5. Browser parses rest of document
  6. DOMContentLoaded is fired.

Will the .my-component handler will always fire after DOMContentLoaded or have you experienced that it might happen before? I guess it reduces to the question if key-frame-handlers will fire before the document is fully loaded/rendered.

Yes, it comes down to when animation events fire which I believe is after DOMContentLoaded.

In MUI we detect all elements present in the DOM when DOMContentLoaded fires using document.querySelectorAll() and then use SentinelJS to detect elements added after.

Reply on news.ycombinator.com