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

can please any one tell me how i can create a loading on my site and let page to load all pictures and then start to showing the site ? is it possible to write this codes with java query and css3 or i need to learn some thing else ? Here is my HTML code . thanks every one .

<?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>
dongtangyi8962
dongtangyi8962 对不起,对不起,我的英语不好,但我的意思是,我想在开始时加载页面,这个加载页面在我的网站中的所有图片和所有文档加载完成后都消失了,明白了吗?
大约 5 年之前 回复
duangang2825
duangang2825 可能的重复如何使浏览器等待显示页面,直到它完全加载?
大约 5 年之前 回复
dongyongyin5339
dongyongyin5339 你可以只使用jQuery和CSS3创建它,但是你将如何做到这一点,你必须找到它。
大约 5 年之前 回复
drnxnbf199049
drnxnbf199049 “可以在我的网站上创建一个加载,并让页面加载所有图片,然后开始显示该网站?”我真的不明白你的问题。
大约 5 年之前 回复

1个回答



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

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

</ div>

展开原文

原文

Yes you can, just add a div or loading image just after body tag so it will be loaded first, then at the end of your html, or before body end tag, or much better on window.onload put javascript function to remove the image.

Here look at this tutorial: http://smallenvelop.com/display-loading-icon-page-loads-completely/

dongyuan9292
dongyuan9292 谢谢你兄弟,对不起我的英语口语很抱歉
大约 5 年之前 回复
dsns47611
dsns47611 没问题,这就是为什么我们在这里:)
大约 5 年之前 回复
doupaimo8288
doupaimo8288 谢谢,即时阅读本教程,如果有任何问题,我会再次问你。谢谢
大约 5 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问