Slow Load Images in PHP, Javascript ( and jQuery?)

Question

I have this PHP code that loads all data from the database. But due to the large quantity of images, the page lags when it's being loaded. So I need a code that will quickly load the page and will load the images as you come across them when you are scrolling. So it the images don't have to be loaded while the page is loaded. (In order to provide better performance)

If this isn't possible, can you provide me with a code that will show a loading icon while the page is loading and hide the lagging images/page. Until the page fully loads (images and all)

Here's my PHP code

<?php
$servername = "localhost";
$username = "XXXXX";
$password = "XXXXX";
$dbname = "XXXXXX";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql = "SELECT * FROM posts WHERE bp ='2' ORDER BY id DESC LIMIT 2";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
                echo "<div class='entire'><br><div style='display:inline-block;vertical-align:top;padding-left:25px;'>
    <img src='" . $row["pro_pic"]. "' alt='img' class='circular'/>
</div>
<div style='display:inline-block;font-size:48px;'>
    <div><font face='helveticaneue-thin'>" . $row["username"]. "</div></font>
</div><a href='http://twitter.com/intent/tweet?hashtags=bithumor&text=" . $row['post_title']. " http://bithumor.co/bits/" . $row['id']. "' target='_blank'><img src='http://s17.postimg.org/3q2ic0n7f/Socialmedia_icons_Twitter_07_128.png' class='share' width='55' height='55'></a><br><br><center><a href='http://app.bithumor.co/posts?id=" . $row["id"]. "' style:'text-decoration:none;' target='_self'><img src='" . $row["content_url"]. "' width='100%' class='upload' style='border-top-width:1px;border-top-color:#A4A4A4;border-bottom-width: 1px;border-bottom-color:#A4A4A4;'></center></a><br><b><span style='padding-left:20px;'><font face='helveticaneue-thin' size='5'>" . $row["post_title"]. "</span></font></b><br><center><embed src='http://app.bithumor.co/bpsection/like?id=" . $row["id"]. "' width='22%'><iframe src='http://app.bithumor.co/community/comment.php?id=" . $row["id"]. "' width='22%'></iframe><iframe src='http://app.bithumor.co/community/report.php?id=" . $row["id"]."' width='22%'></iframe></center></div></div></center><br>";    
}
} else {
    echo "<br><center><font face='HelveticaNeue-Light' color='black' font size='6'>Come back at 7am EST<br> to see the <B>FIRST</B> BitPick!</font></center>";
}
$conn->close();
?>

Answer 1

You could use LazyLoad , then only the images currently inside the viewport is being loaded. The rest of the images will be loaded "on demand".

Answer 2

I think the following steps can help ,

1) You can use caching to speed to the website . Have a look at memcached

2)You can reduce you image quality before uploading the image to the database using,

<?php 
function compress($source, $destination, $quality) {

    $info = getimagesize($source);

    if ($info['mime'] == 'image/jpeg') 
        $image = imagecreatefromjpeg($source);

    elseif ($info['mime'] == 'image/gif') 
        $image = imagecreatefromgif($source);

    elseif ($info['mime'] == 'image/png') 
        $image = imagecreatefrompng($source);

    imagejpeg($image, $destination, $quality);

    return $destination;
}

$source_img = 'source.jpg';
$destination_img = 'destination .jpg';

$d = compress($source_img, $destination_img, 70);
?>

where compress() takes parameters source_img, destination_img, picture quality(say 70).