WOW jquery slider-CodePudding

Having a strange experience with the WOW Jquery slider. I am new to Javascript and Jquery

I have a banner with some text that slides in on page load using the WOW slider. I also have a preloader before the wowslider text slides in.

When I refresh the page of my website locally the banner text slides in as required after the page loader. However, when I load the page locally first time from my desktop it does not slide in after the page loader? But will on page refresh.

The is the code I am using to initialise the page loader:

jQuery(document).ready(function() {
  new WOW().init();
});

This is the text:

<h2 >CARE TO JOIN US?</h2>

This is the page loading animation javascript: // Page loading animation

window.addEventListener("load", () => {
  setTimeout(() => {
    document.getElementById("preloader").classList.add("hide");
  }, 000);
});

This is very strange as mentioned earlier it works on page refresh but not on initial page load. Any help with this would be most appreciated.

CodePudding user response：

You are mixing DOM and jQuery and have a very useless timeout value

Try this

$(function() { // when the page has loaded
  $("#preloader").hide(); // no need for a class
  new WOW().init();
});

CodePudding user response：

Following on from the great answer last posted- I did two things that helped:

I added the following to the initialising script:

jQuery(document).ready(function() {
    $("#preloader").hide(); // no need for the div id
    $("#top-content").show(); // show id
    new WOW().init();//...then initialsie the wow slider
});

I then reduced the size of the image for the banner from 2000 px wide to 1500px. Just a difference of 500px! These changes made a big difference on loading the page from the desktop. The page will now load from the desktop and have the heading slide in with the Wow slider