如何将这个图像预加载器实现到我的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并在完全加载图像时使其淡入。 并且在加载时，将加载图像放置在图像上逐渐褪色时将其移除的顶部。

如您所给出的示例，它是一个插件，也许您甚至可以使用该插件而不是自己编写。