Clever Geek Handbook

Wow + jquery + div animation shows load then reappears

I am using jquery + wow + animate for some of the appearing div animations on the page. Everything works except my page doesn't load smoothly. Divs that should render smoothly first appear on page load, then hide and then appear with animation afterwards.

Please check www.pester.rs and you can see the problem, I've tried everything but nothing works.

+3


source to share


3 answers


This will be an order loading problem - first, the browser downloads the document and displays it. Later, when it loads all the javascript, it hides the content to provide nice animation. So I think it also affected the speed of the internet connection.

Solution 1 : hide content with css so that it loads immediately as hidden

Cons: If javascript crashes, content will remain hidden

Solution 2 : Put this code at the end of the body, but before loading any other scripts (before any other script tag)



var wows = document.getElementsByClassName('wow')
for (i = 0; i < wows.length; i++){
  wows[i].style.visibility ='hidden';
}

It will be executed right after the page loads even before jquery and should be fast enough.

Solution 3 : Use immediately pasted css file in the head of the document as suggested by http://robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether- javascript-support-is-available /

+2


source


You will need to hide these divs with CSS in order not to blink.



0


source


I used this to hide objects

<div class="object-non-visible wow fadeInUp">

with this css

.object-non-visible {
opacity: 0;
filter: alpha(opacity=0);

}

0


source






More articles:


All Articles