WOW jquery slider

Question

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 class="wow fadeInLeftBig">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.

Please visit [help], take [tour] to see what and [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output, preferably in a [Stacksnippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) — mplungjan, Sep 14 '22 at 18:19

score 0 · Answer 1 · answered Sep 14 '22 at 18:22

0

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();
});

answered Sep 14 '22 at 18:22

mplungjan

169,008
28
173
236

Hello Thank you for your answer! The wow slider is sliding in a lot more now with the addition of your code-thank you! However, somtimes it does just load from the desktop without sliding in. It is strange because from what Ive learnt the .ready function should happen after everything else has loaded (including the preloader). I am wondering if it just loads more on refresh because the function is saved in the cache? – hollie Sep 14 '22 at 18:46
That is very likely. Also the WOW slider can defer the loading too, to AFTER the loading of the page if IT is using timeouts – mplungjan Sep 14 '22 at 18:51

score 0 · Accepted Answer · answered Sep 15 '22 at 09:04

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

WOW jquery slider

2 Answers2