CODEWITHSUNDEEP
javascriptjqueryhtml
user12871387
user12871387

Reputation: 1

How to fire javascript function when div is loaded (but do not wait, while will be loaded entire document)?

I'm using menus, tabstrips, etc. on my HTML page, which needs to be initilized in JavaScript, for example:

<ul class="k-menu">
...some menu items
</ul>
<script type="text/javascript">$('.k-menu').kendoMenu();</script>
// This works without any problem

Now I want to remove the from HTML and put into the separate JS file.

$('ul.k-menu').each((i, menu) => {
        if ($(menu).data('kendoMenu') === undefined) {
            $(menu).kendoMenu();
        }
});

But now, how can I fire kendoMenu immediately after loading the ul element? When I will use the following example, the kendoMenu will be initialized after document will be loaded:

$(document).ready(function() {
    $('ul.k-menu').each((i, menu) => {
        if ($(menu).data('kendoMenu') === undefined) {
            $(menu).kendoMenu();
        }
    });
});

But I don't want wait until entire document will be loaded. I want to run the code after element will be loaded (before loaded entire document).

I tryied to use setTimenout, but I cant be sure, if element is loaded before timout will fire.

setTimeout(() => {
  $('ul.k-menu').each((i, menu) => {
        if ($(menu).data('kendoMenu') === undefined) {
            $(menu).kendoMenu();
        }
    });
}, 100);

Upvotes: 0

Views: 192

Answers (1)

thanhdx
thanhdx

Reputation: 618

AFAIK, there's a way to use MutationObserver
You can detect DOM change on the parent node if any child node added & if the added node is the ul you want, then fire the kendoMenu()

An example:

document.querySelector("button").addEventListener("click", function () {
  document.body.appendChild(document.createElement("span"));
});

var observer = new MutationObserver(function (m) {
  if (m[0].addedNodes[0].nodeName === "SPAN")
    document.querySelector("div").innerHTML += "Change Detected<br>";
});

observer.observe(document.body, {childList: true});

<button>Click</button>
<div></div>

Here's another example, which shows that the MutationObserver callback fires as soon as the DOM loads the element during pageload:

// The other <script> tags are there just to demonstrate that the timing is proper;
// on a large page, the MutationObserver callback will be called as soon as the `ul.k-menu` exists,
// without waiting for the rest of the page to download
<script>
window.addEventListener('DOMContentLoaded', () => {
  console.log('DOMContentLoaded');
});
var observer = new MutationObserver((mutations, observer) => {
  const ul = document.querySelector('ul.k-menu');
  if (!ul) {
    return;
  }
  console.log('MutationObserver callback saw that ul.k-menu was just added to DOM');
  observer.disconnect();
  // call .kendoMenu()...
});

observer.observe(document.body, {childList: true});
</script>
<div>Some other div</div>
<script>console.log('Node just before k-menu added to DOM');</script>
<ul class="k-menu">
  ...some menu items
</ul>
<script>console.log('Node after k-menu added to DOM');</script>
<div>Some other div</div>

Upvotes: 1

Related Questions