WOW.js + Query Loader 2 [英] WOW.js + Query Loader 2

问题描述

我遇到 WOW.js 和 查询装载机2 。

我使用Query Loader 2的原因是因为我使用masonry.js（masonry.desandro.com/）来调整我的投资组合类似pinterest，通常页面加载速度很快，但 SOMETIMES 当我在Chrome中以隐身模式测试它时，看看它对第一次打开页面的用户的行为方式，需要一些时间，直到页面加载完毕，所有动画都会被执行预加载器屏幕。

The reason I use Query Loader 2 is because I am using masonry.js (masonry.desandro.com/) to align my portfolio "pinterest-like" and usually the page loads fast, but SOMETIMES when I test it in incognito mode in Chrome to see how it will behave for users who open the page for the first time, it takes some time and until the page is loaded, all animations are executed with preloader screen.

所以，我希望在Query Loader 2完成加载后执行wow.js动画。

So, I would like to achieve that wow.js animations are executed after Query Loader 2 finishes loading.

这是我的现场演示

我在main.js中有QueryLoader2的执行代码：

I have execution code for QueryLoader2 in main.js:

/* Query Loader 2 */
    $("body").queryLoader2({
        backgroundColor: "#3f4134",
        percentage: true,
        deepSearch: true,
        barHeight: 0,
        completeAnimation: "fade"
    });

请帮忙。

推荐答案

在 onLoadComplete 回调中初始化WOW.js：

Initialise WOW.js within the onLoadComplete callback:

/* Query Loader 2 */
$("body").queryLoader2({
    backgroundColor: "#3f4134",
    percentage: true,
    deepSearch: true,
    barHeight: 0,
    completeAnimation: "fade",
    onLoadComplete: function() {
        new WOW().init();
    }
});

这篇关于WOW.js + Query Loader 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！