HI,
I am developing a new website..The design is sowhat over .My problem is its taking too much time to load.I need a very simple interface but i ended up in this bottle neck .I used jquery to add some effects ..
Do u have any suggestion to reduce the page load time or any suggestion in making the site more interactive
the link to the page is http://www.shefeekj.com/WhiteLove/
Usually for a page to take that long to load, it is due to one or more loops taking too long to process or even a slow mysql server. So post the script for index.php and I will check what modifications need to be done.
here is the code for the page.php .... its in called in an iframe from index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cool AJAX MENU</title>
<script type="text/javascript" src="niftycube.js"></script>
<script src="jquery.min.js" type="text/javascript"></script>
<script>
// When the document loads do everything inside here ...
$(document).ready(function(){
Nifty("#menu a","small top transparent");
Nifty("#outcontent","medium bottom transparent");
$('.content').load('boo.php'); //by default initally load text from boo.php
$('#menu a').click(function() { //start function when any link is clicked
$(".content").slideUp("slow");
var content_show = $(this).attr("title"); //retrieve title of link so we can compare with php file
$.ajax({
method: "get",url: "boo.php",data: "page="+content_show,
beforeSend: function(){$("#loading").show("fast");}, //show loading just when link is clicked
complete: function(){ $("#loading").hide("fast");}, //stop showing loading when the process is complete
success: function(html){ //so, if data is retrieved, store it in html
$(".content").show("slow"); //animation
$(".content").html(html); //show the html inside .content div
}
}); //close $.ajax(
}); //close click(
}); //close $(
</script>
<style type="text/css">
body { margin:0 auto 0 auto; color:#000; font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; background-color:#666666; }
.page { margin:100px auto 0 auto; width:750px;}
#menu { list-style:none; margin:0px; padding:0px;}
#menu li { list-style:none; display:inline; }
li.active a { background-color:#FFF;color:#000; }
#menu li a,#menu li a:link { float:left; background-color:#3c3c3c; margin-right:5px; padding:7px; color:#FFFFFF; text-decoration:none; width:6em; text-align:center;}
#menu li a:visited { }
#menu li a:hover { background-color:#327cc8 }
#menu li a:active { background-color:#FFF;color:#000; }
.content {
background-color:#FFF; background:url(ajaxinterface.jpg) bottom right no-repeat; padding:10px; height:300px; margin:0px; }
#loading { clear:both; background:url(wait.gif) center top no-repeat; text-align:center;padding:33px 0px 0px 0px; font-size:12px;display:none; font-family:Verdana, Arial, Helvetica, sans-serif; }
#outcontent {clear:both; background-color:#FFFFFF; }
</style>
</head>
<body>
<div>
<ul id="menu">
<li id="Back"><a href="" title="about">Page Rank</a></li>
<li id="portfolio"><a href="#" title="portfolio">Back Link</a></li>
<li id="contact"><a href="#" title="contact">WHOIS</a></li>
<li id="keyword"><a href="#" title="keyword">Keyword</a></li>
<li id="meta"><a href="#" title="meta">Meta</a></li>
</ul>
<br style="clear:both;" />
</div>
<div id="outcontent">
<div id="loading">LOADING</div>
<div class="content"></div>
</div>
</body>
</html>
I have just checked the code and although the html is fine an all the ajax is a real mess. I think the following section will need a rewrite and although it is hard to see what this piece of code does, I think some tutorials might help find a better way of doing it.
<script>
// When the document loads do everything inside here ...
$(document).ready(function(){
Nifty("#menu a","small top transparent");
Nifty("#outcontent","medium bottom transparent");
$('.content').load('boo.php'); //by default initally load text from boo.php
$('#menu a').click(function() { //start function when any link is clicked
$(".content").slideUp("slow");
var content_show = $(this).attr("title"); //retrieve title of link so we can compare with php file
$.ajax({
method: "get",url: "boo.php",data: "page="+content_show,
beforeSend: function(){$("#loading").show("fast");}, //show loading just when link is clicked
complete: function(){ $("#loading").hide("fast");}, //stop showing loading when the process is complete
success: function(html){ //so, if data is retrieved, store it in html
$(".content").show("slow"); //animation
$(".content").html(html); //show the html inside .content div
}
}); //close $.ajax(
}); //close click(
}); //close $(
</script>thanks a lot for the reply .. i am searching for a better option to do this ..trying to rewrite the code too....i will post the tutorials if i get a better option
simplify your code. use functions and try to use the the common code in separate file and include that at required place. Apply OOPs and try to apply efficient quires.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.