如何將這個圖像預加載器實現到我的php文件中？

Question

我希望將通過ajax處理的圖像以視覺方式進行預加載，而不是通常的圖像加載，在這些圖像中您會看到它們從上到下堆積。 請在這里看看。 您所看到的是我想在我的php文件中直觀地看到什么。

從數據庫中加載圖片的部分如下：

$sql = "SELECT * FROM `fabric`".$filter;
$result=mysql_query("$sql");

//echo $sql;

$data = "";
$ii = 0;
$m = 0;

while($myrow = mysql_fetch_array($result)){
    $ii++;
    $m++;
    if ($m == 1) $data = $data."<div class=\"page current\">";
    elseif ($ii == 1) $data = $data."<div class=\"page\">";

    $data = $data."<a href=\"#\" title=\"".$myrow['name']."\" class=\"show_fabric\" rel=\"".$myrow['id']."\"><img src=\"".$image_directory.$myrow['thumbnail']."\" width=\"100 px\" height=\"100 px\"><div class=\"fb_name\">".$myrow['name']."</div></a>\n";
    if ($ii == 10) {


    $data = $data."</div>";
        $ii = 0;
    }
}
    if ($ii != 10) {
        $data = $data."</div>";
    }

if (empty($data)) echo "No result";
else echo $data;
?>

我真的不知道如何更改php以使演示中顯示效果。 謝謝您提出的所有建設性建議，並原諒我的煩惱:)

Answer 1

您將需要使用javascript，您不能僅在php中做到這一點。 基本思想是使用例如visibility: hidden來隱藏圖像visibility: hidden並在完全加載圖像時使其淡入。 並且在加載時，將加載圖像放置在圖像上逐漸褪色時將其移除的頂部。

如您所給出的示例，它是一個插件，也許您甚至可以使用該插件而不是自己編寫。