Page 1 of 2

Increase load time of webpage by shortening code.

Posted: Thu Nov 03, 2011 12:33 am
by shaunak1234
Hi there I have a website
http://wallpapers.everything.org.in
And due to loading of 60 images the webpage loading time has increased tremendously,
But I wanna load those images.
take a look at the webpage!

my php code is as below

Code: Select all

<html>
<head>
<title>Wallpapers.everything.org.in-download from thousands of wallpapers
</title>
<script type="text/javascript" src="crawler.js">
</script>
<link rel="stylesheet" type="text/css" href="all.css">
</head>
<body onLoad="init()">
<div id="loading" class="loading">
        <div class="backloading"> <img src="images/ajax-loader.gif" border=0></div></div>
<script>
 var ld=(document.all);
  var ns4=document.layers;
 var ns6=document.getElementById&&!document.all;
 var ie4=document.all;
  if (ns4)
 	ld=document.loading;
 else if (ns6)
 	ld=document.getElementById("loading").style;
 else if (ie4)
 	ld=document.all.loading.style;
  function init()
 {
 if(ns4){ld.visibility="hidden";}
 else if (ns6||ie4) ld.display="none";
 }
 </script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=196287183727314";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fbbut">
<div class="fb-like" data-href="http://wallpapers.everything.org.in" data-send="false" data-layout="button_count" data-width="50" data-show-faces="true"></div>
</div>
<div class="title">
<img src="images/title.jpg">
</div>
<div class="lftadd">
<a href="http://www.gainmoneyfast.com/-53951/3876.htm" target="_top"><img src="http://www.gainmoneyfast.com/banners/banner_120x60_970610.gif" border="0" alt="Affiliate Program"></a></div>
        <iframe width="850" height="540" class="iframe" border="0" name="view" src="http://wallpapers.everything.org.in/main.html">
</iframe>
<?php 
ob_start();
$a = 1;
$b = 60;
//ConnectstoyourDatabase
mysql_connect("abc", "abcr", "abc") or die(mysql_error()); 
 mysql_select_db("abc") or die(mysql_error());
?>
<div class="c">
<div class="marquee" id="mycrawler2">
<?php
for ($a=1; $a<=$b; $a++)
{
$data = mysql_query("SELECT * FROM abc WHERE srno= $a" )
or die(mysql_error());
while($info = mysql_fetch_array( $data ))
{
Print"<a target='view' height='10' width='10' href='http://wallpapers.everything.org.in/images/".$info['Name']."'> <img src='images/".$info['Name'] . "' height='90' width='90'></a>";
}
}
ob_end_flush();
?>
</div>
<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler2',
style: {	
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
savedirection: true,
random: true
});
</script>
</div>
<dim class="sidebar" >
<b class="welcomemess">Welcome Guest,</b>
</dim>
<dim class="rgtmenu">
<a href="http://wallpapers.everything.org.in/nature.html" style="text-decoration:none;color:#cc0000;">Nature</a><br>
<a href="http://wallpapers.everything.org.in/cars.html" style="text-decoration:none;color:#cc0000;">Cars</a><br>
<a href="http://wallpapers.everything.org.in/wild.html" style="text-decoration:none;color:#cc0000;">Wildlife</a><br>
<a href="http://wallpapers.everything.org.in/forest.html" style="text-decoration:none;color:#cc0000;">Forest</a><br>
<a href="http://wallpapers.everything.org.in/anime.html" style="text-decoration:none;color:#cc0000;">Anime</a><br>
<a href="http://wallpapers.everything.org.in/music.html" style="text-decoration:none;color:#cc0000;">Music</a><br>
<a href="http://wallpapers.everything.org.in/celebs.html" style="text-decoration:none;color:#cc0000;">Celebrities</a><br>
<a href="http://wallpapers.everything.org.in/game.html" style="text-decoration:none;color:#cc0000;">Game</a><br>
<a href="http://wallpapers.everything.org.in/bikes.html" style="text-decoration:none;color:#cc0000;">Bikes</a><br>
<a href="http://wallpapers.everything.org.in/divine.html" style="text-decoration:none;color:#cc0000;">Divine</a><br>
<a href="http://wallpapers.everything.org.in/scene.html" style="text-decoration:none;color:#cc0000;">Scenery</a><br>
<a href="http://wallpapers.everything.org.in/gadget.html" style="text-decoration:none;color:#cc0000;">gadgets/electronics</a><br>
<a href="http://wallpapers.everything.org.in/other.html" style="text-decoration:none;color:#cc0000;">Other</option><br><br><br>
<a href="http://wallpapers.everything.org.in/upload.php" style="text-decoration:none;color:#cc0000;"><input type="button" value="Upload"></a><br>
<a href="http://wallpapers.everything.org.in/report.html" style="text-decoration:none;color:#cc0000;"><input type="button" value="report a copyrighted image."></a>
</dim>
<dim class="rgtadd" >
<script type="text/javascript" src="http://www.gainmoneyfast.com/services/banner_rotator.php?a_aid=53951&a_bid=3787"></script>
</div>
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-26066258-2']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
</body>
</html>

Re: Increase load time of webpage by shortening code.

Posted: Thu Nov 03, 2011 1:34 am
by social_experiment
Try a pre-loading script using Javascript; but imo 60 images will take time to download, even if you have a fast connection.

Re: Increase load time of webpage by shortening code.

Posted: Thu Nov 03, 2011 2:31 am
by shaunak1234
whats the https thing can i display the page and simultaneously download images

Re: Increase load time of webpage by shortening code.

Posted: Thu Nov 03, 2011 2:36 am
by social_experiment

Re: Increase load time of webpage by shortening code.

Posted: Thu Nov 03, 2011 6:41 am
by Celauran
60 separate queries? Why?

Code: Select all

<?php
for ($a=1; $a<=$b; $a++)
{
$data = mysql_query("SELECT * FROM abc WHERE srno= $a" )
or die(mysql_error());
while($info = mysql_fetch_array( $data ))
{
Print"<a target='view' height='10' width='10' href='http://wallpapers.everything.org.in/images/".$info['Name']."'> <img src='images/".$info['Name'] . "' height='90' width='90'></a>";
}
}
Also, it appears you're loading the full sized images and using HTML to display them as thumbnails. That doesn't seem particularly efficient.

Re: Increase load time of webpage by shortening code.

Posted: Fri Nov 04, 2011 11:51 pm
by shaunak1234
what can I do I am a new bie?
How Can I have a single query?
how can I load images in small size

Re: Increase load time of webpage by shortening code.

Posted: Sat Nov 05, 2011 1:33 am
by social_experiment
Celauran wrote:Also, it appears you're loading the full sized images and using HTML to display them as thumbnails. That doesn't seem particularly efficient.
@OP You can start by using smaller (actual smaller images) thumbnail images, your current 'thumbnails' are not 'thumbnails' which still makes the page loading take long.

Re: Increase load time of webpage by shortening code.

Posted: Sat Nov 05, 2011 3:59 am
by shaunak1234
I cannot resize all the images as they will occupy much larger space, other option?

Re: Increase load time of webpage by shortening code.

Posted: Sat Nov 05, 2011 8:33 am
by Celauran
shaunak1234 wrote:How Can I have a single query?

Code: Select all

SELECT `name` FROM abc ORDER BY srno ASC LIMIT 60
Although maybe loading fewer than 60 at a time would also be a good idea.

Re: Increase load time of webpage by shortening code.

Posted: Sat Nov 05, 2011 8:33 am
by Celauran
shaunak1234 wrote:I cannot resize all the images as they will occupy much larger space, other option?
Really, you'll have to. Thumbnails won't take up that much space and it will dramatically improve load time.

Re: Increase load time of webpage by shortening code.

Posted: Tue Nov 08, 2011 6:51 am
by shaunak1234
thanks guys

Re: Increase load time of webpage by shortening code.

Posted: Tue Nov 08, 2011 7:03 am
by shaunak1234
I Have got an idea can I show a button to the users which says click to view next 50 images and on click it will load next 50 images to display

Re: Increase load time of webpage by shortening code.

Posted: Tue Nov 08, 2011 7:06 am
by Celauran
That should return 60 results. What does mysql_num_rows() give you? Post the rest of your code if you want us to take a look.

Re: Increase load time of webpage by shortening code.

Posted: Tue Nov 08, 2011 7:23 am
by shaunak1234
Celauran wrote:That should return 60 results. What does mysql_num_rows() give you? Post the rest of your code if you want us to take a look.
sorry it did I have changed the post

Re: Increase load time of webpage by shortening code.

Posted: Tue Nov 08, 2011 7:29 am
by Celauran
shaunak1234 wrote:I Have got an idea can I show a button to the users which says click to view next 50 images and on click it will load next 50 images to display
Sure. Simple pagination should do that. Define a number of images to display per page and use the current page number to generate your offset.

Code: Select all

$per_page = 10;
$offset = (intval($_GET['page']) - 1) * $per_page;
$query = "SELECT foo FROM bar WHERE something LIMIT $offset, $per_page";