Question

我使用jquery跟随html代码。这里有一个名为“SHOW PAGE LOADER”的按钮。当我点击它时，它向我展示了一个jquery动画效果。所以我想在页面内容完全加载之前显示此效果。如何使用以下代码执行此操作？我认为我必须在加载页面之前单击按钮（不确定）或其他。

现场演示：http://creativeartbd.com/demo/page-load/index.html

<!DOCTYPE html>
<html lang="en">
<head>      
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
    <link rel="stylesheet" type="text/css" href="css/component.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="js/snap.svg-min.js"></script>
    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <div id="pagewrap" class="pagewrap">        
        <div class="show" id="page-1">
            <!-- Top Navigation -->         
            <section class="columns clearfix">
                <div class="column">                        
                    <p><a class="pageload-link">Show Page Loader</a></p>
                </div>
            </section>              
        </div><!-- /container -->

        <!-- The new page dummy; this would be dynamically loaded content -->
        <div class="container" id="page-2">             
            <section>
                <h2>This is an example for a new page.</h2>
                <p><a class="pageload-link" href="#page-1">Go back</a></p>
            </section>
        </div><!-- /container -->

        <div id="loader" class="pageload-overlay" data-opening="M20,15 50,30 50,30 30,30 Z;M0,0 80,0 50,30 20,45 Z;M0,0 80,0 60,45 0,60 Z;M0,0 80,0 80,60 0,60 Z" data-closing="M0,0 80,0 60,45 0,60 Z;M0,0 80,0 50,30 20,45 Z;M20,15 50,30 50,30 30,30 Z;M30,30 50,30 50,30 30,30 Z">
            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="none">
                <path d="M30,30 50,30 50,30 30,30 Z"/>
            </svg>           

        </div><!-- /pageload-overlay -->


     <p style="margin:0 150px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque rerum ipsum sint consectetur quos vitae veritatis magnam ipsa quas maiores natus quibusdam inventore reiciendis, alias quae eaque! Quod, voluptates, iste.</p><br/>

     <p style="margin:0 150px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque rerum ipsum sint consectetur quos vitae veritatis magnam ipsa quas maiores natus quibusdam inventore reiciendis, alias quae eaque! Quod, voluptates, iste.</p><br/>

     <p style="margin:0 150px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque rerum ipsum sint consectetur quos vitae veritatis magnam ipsa quas maiores natus quibusdam inventore reiciendis, alias quae eaque! Quod, voluptates, iste.</p><br/>          


    </div><!-- /pagewrap -->
    <script src="js/classie.js"></script>
    <script src="js/svgLoader.js"></script>
    <script>
        (function() {
            var pageWrap = document.getElementById( 'pagewrap' ),
                pages = [].slice.call( pageWrap.querySelectorAll( 'div.container' ) ),
                currentPage = 0,
                triggerLoading = [].slice.call( pageWrap.querySelectorAll( 'a.pageload-link' ) ),
                loader = new SVGLoader( document.getElementById( 'loader' ), { speedIn : 100 } );

            function init() {
                triggerLoading.forEach( function( trigger ) {
                    trigger.addEventListener( 'click', function( ev ) {
                        ev.preventDefault();
                        loader.show();
                        // after some time hide loader
                        setTimeout( function() {
                            loader.hide();

                            classie.removeClass( pages[ currentPage ], 'show' );
                            // update..
                            currentPage = currentPage ? 0 : 1;
                            classie.addClass( pages[ currentPage ], 'show' );

                        }, 2000 );
                    } );
                } );    
            }

            init();
        })();


       $(document).ready(function() {
            $('.pageload-link').click();
       }); 

    </script>
</body>

如何在页面完全加载之前单击按钮

0 个答案: