php - 如何将这个图像预加载器实现到我的 php 文件中？

Question

我想让通过 ajax 处理的图像以视觉方式预加载，而不是像通常那样从上到下加载图像。请看here .你所看到的就是我想在我的 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 隐藏您的图像，并在它们完全加载时让它们淡入。在加载时，您将加载图像放在顶部，当您开始淡入图像时将其移除。

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