0

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>
rrk
  • 15,677
  • 4
  • 29
  • 45
Amir Hosein Navari
  • 107
  • 1
  • 12
  • "can create a loading on my site and let page to load all pictures and then start to showing the site ?" I don't really understand your question. – Pouya Ataei Aug 10 '15 at 08:51
  • you can create it with jQuery and CSS3 only, but How will you do that, you will have to find it. – Rohit Kumar Aug 10 '15 at 08:52
  • Possible duplicate of [How can I make the browser wait to display the page until it's fully loaded?](http://stackoverflow.com/q/1435015/3361444) – Debflav Aug 10 '15 at 08:53
  • ow , sorry , i am bad in english language , but i mean , i want a loading page at start , and this loading page gone after all pictures and all document in my site are load complete , understand ? – Amir Hosein Navari Aug 10 '15 at 08:54

1 Answers1

1

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/

VMcreator
  • 833
  • 8
  • 17