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