在PHP，Javascript（和jQuery？）中緩慢加載圖像

Question

我有這個PHP代碼加載數據庫中的所有數據。但由於大量的圖像，頁面在加載時滯後。所以我需要一個能夠快速加載頁面的代碼，並且會在您滾動時碰到它們時加載圖像。所以它不需要在加載頁面時加載圖像。 （爲了提供更好的性能）

如果這是不可能的，你可以提供一個代碼，當頁面加載時顯示加載圖標並隱藏滯後圖像/頁面。直到頁面完全加載（圖片和所有）

這裏是我的PHP代碼

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

你可以使用LazyLoad，那麼目前內部正在加載的視口只圖像。其餘的圖像將被「按需」加載。

Answer 2

我覺得下面的步驟可以幫助，

1）您可以使用緩存來加速網站。看看memcached

2）您可以降低圖像質量利用圖像上傳到數據庫之前，

<?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); 
?> 

其中壓縮（）採用參數source_img，destination_img，畫質（比方說70） 。