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

其中 compress() 接受參數 source_img、destination_img、圖片質量（比如 70）。