Wow.js在服务器中不起作用

Question

In am using wow.js to animate element on scroll. It works great in local but when I uploaded to server, the animated class is called before scrolling (with page loads). Click here

to see it live.

Answer 1

I think it worked locally because the page assets above the gif loaded faster than in the web. When I open the page, the wow used div is loading with "animated" class before I scroll for it (It happened because the wow div was visible while the header page assets was loading).

The wow.js is used to animate some HTML element on scroll and not to control the gif animation state but it works as you want because the wow apply visibility: visible in element after its div is visible.

You can start the animation of the gif when its visible at the page if you show the image only when you scroll, controlling its visibility state (loading with image visibility hidden and then changing it to visible).

You can also start the gif animation when scrolling if you use something like this plugin to "lazy load" the image. "Lazy load" plugin will load the image when it is going to be visible in the window.