I have a function that starts up after 1 second from page loading, during the development phase locally it works, but when I build my application and put it on a server the timeout no longer works (on chrome it works only after accepting the banner of cookies and reloaded the page), while if I go in incognito mode it does not work.
This is the code of timeout:
window.setTimeout(() => {
this.brake();
},1000);
This is a vue.js application.
I tried to modify the function by inserting this piece of code:
document.addEventListener('DOMContentLoaded', function() {
window.setTimeout(() => {
this.brake();
},1000);
}, false);
but it still doesn't work.
The link of the test site is: https://new.carbobrake.com/
Once the page has finished loading the disk should stop by itself, but this does not happen.
----EDIT----
This is my code:
<div id="animation-container">
<img id="fixed-canvas-container" :src="this.homeImages[0]" alt="" />
<img id="scroll-canvas-container" :src="this.animationImages[0]" alt="" />
<div id="step0">
// other code
</div>
</div>
Javascript:
methods: {
brake() {
this.canvasContainer = document.getElementById("fixed-canvas-container");
this.canvasContainer.src = this.homeImages[1];
setTimeout(() => {
document.body.style.overflowY = "visible";
this.setImageMargin();
document.getElementById("scroll-canvas-container").style.display =
"block";
var step0 = document.getElementById("step0");
TweenMax.fromTo(
step0,
0.5,
{
display: "none",
opacity: 0,
},
{
display: "block",
opacity: 1,
ease: Power3.easeIn,
}
);
}, 1100);
// TODO check
setTimeout(() => {
this.canvasContainer.style.display = "none";
},2500);
}
},
mounted() {
window.setTimeout(() => {
this.brake();
}, 1000);
}
I solved it like this:
window.addEventListener('load', this.brake);
Now it works correctly at the end of the page load.