Question

我有一个页面加载脚本，可以在两次潜水之间切换（给出从加载屏幕移动到主页的错觉）。这些函数使用classie库通过触发器（在这种情况下是一个按钮/链接）来完成类的袖口交换。

我想要包含一个小型加载器，但只有在单击按钮（triggerLoading）之后才有这个加载器，所以这个加载器需要出现在loadingSVG.show（）;

之下

问题是我不太确定如何包含这个灯。这是代码。

我使用Classie的当前页面交换脚本

(function() {
            var pageLoaderWrap = document.getElementById( 'pagewrap' ),
                pagesLoader = [].slice.call( pageLoaderWrap.querySelectorAll( 'div.client-homepage' ) ),
                currentPageLoader = 0,
                body = document.body,

                triggerLoading = [].slice.call( pageLoaderWrap.querySelectorAll( 'a.pageload-link' ) ),                    
                loaderSVG = new SVGLoader( document.getElementById( 'loader' ), { 
                    speedIn : 300, 
                    easingIn : mina.easeinout 
                } );

            function pageSwap() {
                triggerLoading.forEach( function( trigger ) {
                    trigger.addEventListener( 'click', function( ev ) {
                        ev.preventDefault();
                        loaderSVG.show();

                        setTimeout( function() {
                            loaderSVG.hide();
                            classie.removeClass( pagesLoader[ currentPageLoader ], 'show-page' );
                            classie.addClass (pagesLoader[currentPageLoader], 'page-hide');
                            classie.removeClass(body, 'scrolling');
                            currentPageLoader = currentPageLoader ? 0 : 1;
                            classie.addClass( pagesLoader[ currentPageLoader ], 'show-page' );
                            }, 5000 );
                        });
                }); 
            }
            pageSwap();                  
          })();

这是我想要包含的小型装载机

    $(function () {
        $('.waveLoader').loader();
        var progr = 1;
        setInterval(function () {
            $('.waveLoader').loader('setProgress', ++progr);
            }, 100);
        });

我想在触发器语句中包含它的原因是因为如果你不加载加载器的动画在页面加载时而不是在点击链接时启动。

干杯

页面加载器 - 组合功能

0 个答案: