Question

我有一个示例页面，其中包含演示Lorem ipsum内容。有一个名为“SHOW PAGE LOADER”的按钮。当我点击它。它显示页面加载效果。这是实时链接：http://creativeartbd.com/demo/page-load/index.html

现在我想在页面内容完全加载之前显示此页面加载效果。可能吗？如果是这样，我该怎么做？

我使用此代码在页面加载后单击按钮但它不起作用：

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

以下是完整代码：

<!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>

Answer 1

在页面完全加载后，您似乎正试图触发对它的点击。这是隐藏吗？我建议按以下方式实现加载：

创建所有页面标记，但请确保加载叠加层高于所有内容，例如，使用z-index。

<div class="actual-page"></div>

<div class="load-overlay"></div>

确保所有“显示”样式都应用于您的装载机。默认情况下，它应该是可见的，因为这就是你想要启动页面的方式。

.load-overlay {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
}

然后你可以放置任何动画或gif来显示加载正在发生，并且在你的onready处理程序中你应该隐藏加载器，因为那是在页面加载完毕的时候。

$(document).ready(function() {
    $('.load-overlay').hide();
});

如何在页面完全加载之前显示jQuery动画效果？

1 个答案: