php mysql load webpage before images

Question

How can you make it so that a webpage loads its structure (the divs, frames, overall appearance) first, then load images one by one? sort of like what this website does -> www.9gag.com

I use mysql queries to display images, see code below

function display_posts($page){
$start=($page*5)-4;
$query="SELECT * FROM `posts`   ORDER BY postid DESC LIMIT $start, 5";
$result = $mysqli->query($query) or die($mysqli->error.__LINE__);

while($row = $result->fetch_assoc()) {  

   $pic=$row['pic'];
   $postid=$row['postid'];

echo "<p class=\"pic_title\">".$row['title']."</p>";
echo "<a href='view.php?img=".$postid ."'><img src='". $pic ."' /></a> ";

}

It takes about 8 seconds to load a complete page of 5 images, but when it does load, the webpage immediately appears complete with all the images, and I want it to load the structure first, then the images. Thanks!

Would this help? http://stackoverflow.com/questions/5117421/how-to-load-images-dynamically-or-lazily-when-users-scrolls-them-into-view — Danny Beckett, Mar 24 '13 at 06:14

score 1 · Answer 1 · answered Mar 24 '13 at 06:48

One way is to return the page without looking up the images, and then use a javascript Ajax call to request the image data once the paga has loaded. However, this is quite a lot of throbbed to,go to, and the user will still have to,wait for the images.

I think you should be asking yourself where those 8 seconds are going. That is a lot of time for 5 images. Use your browser tools e.g f12 in ie9 or firebug in Firefox to see how long the individual time requests are taking.

php mysql load webpage before images

1 Answers1