How to use with DOMContentLoaded

Resolved Rookie
(@alriksson)

5 years, 7 months ago

Possible to make it work to delay javascripts which uses DOMContentLoaded event to initialise itself?

At the moment I delaying this script with Flying scripts from loading until after the DOMContentLoaded event has fired which break a function.

If not possible sorting from Flying Scripts side, menaing the core plugins script needs to execute the code without DOMContentLoaded event to initialise itself what do you suggest to use as a performance expert? I see huge benefits form delaying the script as it’s only parts of the scripts using DOMContentLoaded that inject things in the DOM. This tiny part breaks due to delaying it.

Viewing 4 replies - 1 through 4 (of 4 total)

Plugin Author Gijo Varghese
(@gijo)

5 years, 7 months ago
@alriksson You can do it via custom JS. Write a script that will fire DOMContentLoaded and delay the same script using Flying Scripts. Make sure that the script is at the bottom. https://stackoverflow.com/questions/9153314/manually-dispatchevent-domcontentloaded

I haven’t tried it. It should work.
- This reply was modified 5 years, 7 months ago by Gijo Varghese.
Thread Starter Rookie
(@alriksson)

5 years, 7 months ago
@gijo Thanks for the suggestion. I tried different variations but only make it work once user click. Then it trigger the DOMContentLoaded and load all things using this one. Would like it just to trigger once it’s loaded if possible.

But it also seem to cause issue with other things, such as with oxygen page builders navigation. Which uses inline jQuery to open and fold the drop down menu. It open after page loaded and act strange.

It seems like the DOMContentLoaded trigger open them on every mouse click etc. So it conflict there. Maybe possible to trigger without click and target it towards a specific file that contains the words “this-javascript”.

Blow is the snippet that stop working once I delay the script with flying scripts.
```
    document.addEventListener("DOMContentLoaded", (function() {
        for (var t = document.querySelectorAll(".glsr"), i = 0; i < t.length; i++) {
            var n = window.getComputedStyle(t[i], null).getPropertyValue("direction");
            t[i].classList.add("glsr-" + n)
        }
        window.GLSR.Forms = S,
        new S,
        new y,
        new a
    }
    ))
}
```
- This reply was modified 5 years, 7 months ago by Rookie.
- This reply was modified 5 years, 7 months ago by Rookie.
- This reply was modified 5 years, 7 months ago by Rookie.
Thread Starter Rookie
(@alriksson)

5 years, 7 months ago
Any ideas or suggestions is very much appriciated.

Sometimes it seems to work and sometimes not. The script execute but doesn’t always properly load above snippet. Making it fail more often than it sucess.

Used this one for better debugging.
```
// Code goes here
document.addEventListener('DOMContentLoaded', (event) => {
  console.log('DOMContentLoaded triggered');
});

const event = new Event('DOMContentLoaded', {
  view: window,
  bubbles: true,
  cancelable: true
});
const cancelled = !document.dispatchEvent(event);
if (cancelled) {
  // A handler called preventDefault.
  console.log('The event was cancelled...');
} else {
  // None of the handlers called preventDefault.
  console.log('The event was not cancelled...');
}
```
jackos86
(@jackos86)

5 years, 7 months ago

Hello,

I have this error in flying scripts 🙁
how can i solve this problem https://generatepress.com/forums/topic/twice-click/#post-1560253

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘How to use with DOMContentLoaded’ is closed to new replies.