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

【问题标题】：can create a loading page with jquery and css3 or need something else?可以使用 jquery 和 css3 创建加载页面还是需要其他东西？
【发布时间】：2015-08-10 08:49:04
【问题描述】：

请任何人告诉我如何在我的网站上创建加载并让页面加载所有图片然后开始显示该网站？是否可以使用 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>

【问题讨论】：

"可以在我的网站上创建一个加载，让页面加载所有图片，然后开始显示该网站吗？"我不太明白你的问题。
你只能用 jQuery 和 CSS3 创建它，但是你会怎么做，你必须找到它。
How can I make the browser wait to display the page until it's fully loaded?的可能重复
噢，对不起，我的英语不好，但我的意思是，我想要一个加载页面，并且在我网站中的所有图片和所有文档加载完成后，这个加载页面就消失了，理解?

标签： javascript java php jquery css

【解决方案1】：

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

这里看这个教程：http://smallenvelop.com/display-loading-icon-page-loads-completely/

【讨论】：

谢谢，我要去读这个教程，如果有什么问题我会再问你。谢谢
@AmirHoseinNavari ，没问题，这就是我们在这里的原因:)
谢谢你，兄弟，抱歉我的英语不好