Question

可以请任何人告诉我如何在我的网站上创建一个加载并让页面加载所有图片，然后开始显示该网站？有可能用java查询和css3编写这些代码，或者我需要学习其他东西吗？这是我的HTML代码。谢谢你们。

<?php 
 /** 
    *@copyright Copyright (C) 2008 - 2009 . All rights reserved.
     * @license 
 */ 
 // no direct access 
 defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
    <head>
        <jdoc:include type="head" /> 
        <link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/system/css/system.css" type="text/css" /> 
        <link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/system/css/general.css" type="text/css" /> 
        <link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/css/template.css" type="text/css" /> 
        <?php if($this->direction == 'rtl') : ?> 
        <link href="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/css/template_rtl.css" rel="stylesheet" type="text/css" /> 
        <?php endif; ?> 
        <link id="JTKLocalCss" href="css/template.css" rel="stylesheet" type="text/css" />   
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
        <script type="text/javascript">
            jQuery(document).ready(function(){
                jQuery(document).on("click","#menu-oc",function() {
                    jQuery("#menu-drop").slideToggle("slow");
                });
                jQuery(window).scroll(function () {
                    if (jQuery(this).scrollTop() > 0) {
                        jQuery("#header").addClass("fixed");
                        jQuery("#header").addClass("goblack");
                    }  else {
                        jQuery("#header").removeClass("fixed");
                        jQuery("#header").removeClass("goblack");
                    }
                });         

                jQuery("#introcenter").animate({width: "0"},600,function (){
                    jQuery(".intro").animate({height : "0"},600,function () {
                        jQuery("#main").animate({opacity : "1"},500);
                    });
                });
            });
        </script>

        <style>
        </style>
    </head>
    <body>                                              
        <div id="main">
            <div id="header">
                <button id="menu-oc">HELLO</button>
            </div>
            <div id="menu-drop">
                <div id="menu">
                    <jdoc:include type="modules" name="menu" style="html" />
                </div>
            </div>
        <div id="index">
            <div id="top">
                <jdoc:include type="modules" name="top" style="html" />
                    </div>
            <div id="top2">
                <jdoc:include type="modules" name="top2" style="html" />
                    </div>
            <div id="center">
                <jdoc:include type="modules" name="center" style="html" />
                    </div>
            <div id="contents">
                <jdoc:include type="component" />
                    </div>
            <div id="bottom">
                <jdoc:include type="modules" name="bottom" style="html" />
                    </div>
            <div id="bottom2">
                <jdoc:include type="modules" name="bottom2" style="html" />
                    </div>
            <div id="footer">
                <jdoc:include type="modules" name="footer" style="html" />
                    </div>

        </div>
        </div>
                <div id="introcont">
                <div id="introtop" class="intro"></div>
                <div id="introcenter"></div>
                <div id="introdown" class="intro"></div>
        </div>
    </body>
</html>

Answer 1

是的你可以，只需在body标签之后添加一个div或加载图像，这样它将首先加载，然后在html的末尾，或者在body标记之前加载，或者更好地在window.onload上添加javascript函数删除图像。

在这里看一下本教程：http://smallenvelop.com/display-loading-icon-page-loads-completely/

可以使用jquery和css3创建加载页面还是需要其他东西？

1 个答案: