Question

嘿伙计我只是在我的页面上使用nprogress.js作为预加载器，现在我使用了与他们在其文档EXAMPLE HERE中相同的代码。

这个插件一切正常，除了我有一个小问题，就是在插件代码运行之后，我的其余代码似乎根本没有运行，我不明白为什么，请参阅这FIDDLE HERE

现在进行测试我添加了一个滚动函数来测试我的滚动条滚动，我添加了以下代码::

$(window).on('scroll' , function(){
      alert('yeeeeey , we are scrolling yeeeeeeeeeeeeeeey ! ');
});

现在在小提琴中，滚动似乎会触发，但在真正的浏览器中它似乎不会发射，我不知道为什么。所以基本上插件nprogress正在影响我的其他jquery代码，我不知道为什么因为我的其他代码包括动画和滚动事件根本不是完美的。

我嗤之以鼻，这是显而易见的，但我只是无法在这里嗅到这个问题。谁能告诉我我错过了什么。

编辑和更正 ::

好吧，实际上代码也可以在浏览器中运行，但是在我的实时网站上它不会，看看下面我的代码::

NProgress.start();
    setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); $('#nprogress-logo').hide(); }
        , 1000);

    /*end of preloader code*/


    // $('.fade').removeClass('out'); $('#nprogress-logo').hide();

    function onScrollInit( items, trigger ) {
          items.each( function() {
            var osElement = $(this),
                osAnimationClass = osElement.attr('data-os-animation'),
                osAnimationDelay = osElement.attr('data-os-animation-delay');

            osElement.css({
                '-webkit-animation-delay':  osAnimationDelay,
                '-moz-animation-delay':     osAnimationDelay,
                'animation-delay':          osAnimationDelay
            });

            var osTrigger = ( trigger ) ? trigger : osElement;

                osTrigger.waypoint(function() {
                    osElement.addClass('animated').addClass(osAnimationClass);
                },{
                    triggerOnce: true,
                    offset: '90%'
                }); // end waypoints

          }); // end each
        }

        onScrollInit( $('.staggered-animation'), $('.staggered-animation-container') );

我正在使用航点添加动画，现在在页面加载“onScrollInit”函数被调用，但是，当我滚动到特定部分时，动画没有被添加，除非我做其中一个以下::

1。重新调整我的浏览器，然后突然动画开火，

2. 另一种方法是将第一个setTimeout之前的代码包装在setTimeout函数中，如下所示::

NProgress.start();
    setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); $('#nprogress-logo').hide(); }
        , 1000);

    /*end of preloader code*/


    // $('.fade').removeClass('out'); $('#nprogress-logo').hide();

    function onScrollInit( items, trigger ) {

        console.log('inside onScrollInit');
          items.each( function() {
            var osElement = $(this),
                osAnimationClass = osElement.attr('data-os-animation'),
                osAnimationDelay = osElement.attr('data-os-animation-delay');

            osElement.css({
                '-webkit-animation-delay':  osAnimationDelay,
                '-moz-animation-delay':     osAnimationDelay,
                'animation-delay':          osAnimationDelay
            });

            var osTrigger = ( trigger ) ? trigger : osElement;

                osTrigger.waypoint(function() {
                    osElement.addClass('animated').addClass(osAnimationClass);
                },{
                    triggerOnce: true,
                    offset: '90%'
                }); // end waypoints

          }); // end each
        }


        setTimeout(function(){
            onScrollInit( $('.staggered-animation'), $('.staggered-animation-container') );
        }, 2000);

注意我是如何将onScrollInit添加到setTimeout函数::

的

setTimeout(function(){
            onScrollInit( $('.staggered-animation'), $('.staggered-animation-container') );
        }, 2000);

有人可以告诉我为什么会发生这种情况？我是否首先使用setTimeout犯了错误？

nprogress预加载器，使我的其他插件代码无效

0 个答案: