3

I am using jquery + wow + animate for some appearing div animations on page. Everything is working except my page is not loading smoothly. Divs which should appear smoothly first appear on page load, then hide and after it they appear with animation.

Please check www.pester.rs and you could see the problem, I have tried everything but nothing works.

emir
  • 1,336
  • 1
  • 14
  • 33
  • I don't see any problem... – odedta Apr 23 '15 at 08:05
  • 2
    So, are we to check out your web-site and try to get inside the bulk of code or it is you who should show the whole problem in question? – Dmitry Ginzburg Apr 23 '15 at 08:08
  • Your page is force-feeding me with 7MB worth of images :-( Try upload smaller images or use a CDN to serve them. – Kenny Ki Apr 23 '15 at 08:32
  • It could be the image size, what is CDN? – emir Apr 23 '15 at 09:06
  • 1
    Please try to recreate the issue with minimalistic code in [JSFiddle](http://jsfiddle.net/) and post that code here in the question too. Do not link to a website where the problem will not be reproducable later. Think about future viewers which may have the same issue, your current question would not be useful at all to them. – Praxis Ashelin Apr 23 '15 at 09:28

3 Answers3

3

It will be loading order issue - first, the browser downloads document and display it. Later when it loads entire javascript it hides the content to provide the nice animation. So I think it's also affected by internet connection speed.

Solution 1: hide the content with css so it will immediately load as hidden

Cons: if javascript crashes, the content will stay hidden

Solution 2: Place this code at the end of body, but before any other scripts are loaded (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 loading even before jquery and it should be fast enough.

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

Vladiks
  • 168
  • 9
  • I have been thinking to hide it, but I didn't see that it is recommended by wow.js. I thought that there is some problem with code why is that happening. I have tried on some other websites and still same problem. maybe I could hide that divs with jquery and then reveal it with wow? – emir Apr 23 '15 at 09:11
  • I have tried with but it does not solve problem. I have tried with .wow { visibility:hidden;} and it works but there is a problem what if javasctipt is disabled. It would be better if I could do it via javascript. – emir Apr 23 '15 at 09:51
  • I've added other solution in pure javascript, which could help you without modifying CSS. I think the problem with your solution using `` is not fast enought, cause it was included after jquery so browser had to wait for jquery to be fully loaded... – Vladiks Apr 23 '15 at 12:27
  • thank you for your effort, I have tried this pure javascript code on the bottom but before other javascript. It is still not fast enough. – emir Apr 24 '15 at 08:49
  • There are still some other JS script link before your the code to hide wow divs, I mean: `` and `` – Vladiks Apr 26 '15 at 09:43
  • I have put it under wow div but still chrome is showing pictures and then hide and show it on first loading. – emir Apr 26 '15 at 14:40
  • Solution 1 and solution 3 are working. Solution 2 still dont work well. I have used solution 3 because it works also if javasctipt is disabled. – emir Apr 26 '15 at 15:02
0

You will have to hide those divs with CSS, to prevent the blinking.

vdwijngaert
  • 1,515
  • 11
  • 24
  • I know, we have talk about it in comments. It is working, but if javascript is disabled content will be hidden. – emir Apr 26 '15 at 15:35
0

I used this to hide the objects

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

with this css

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

}

Joel
  • 62
  • 1
  • 10