简体   繁体   English

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

[英]How to implement this image preloader into my php file?

I want to have my images which are processed via ajax to be preloaded visually rather then the usual loading of images where you see them build up from top to bottom. 我希望将通过ajax处理的图像以视觉方式进行预加载,而不是通常的图像加载,在这些图像中您会看到它们从上到下堆积。 Please take a look here . 在这里看看。 What you see there is what I want to have in my php file visually. 您所看到的是我想在我的php文件中直观地看到什么。

The part where the pictures are loaded from the database are the following: 从数据库中加载图片的部分如下:

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

I really don't know how to change the php in order to have the effect shown in the demo. 我真的不知道如何更改php以使演示中显示效果。 Thank you for all constructive advices and forgive my noobiness :) 谢谢您提出的所有建设性建议,并原谅我的烦恼:)

You will need javascript for this, you can´t do it in php alone. 您将需要使用javascript,您不能仅在php中做到这一点。 The basic idea is to hide your images using for example a visibility: hidden and have them fade in when they are completely loaded. 基本思想是使用例如visibility: hidden来隐藏图像visibility: hidden并在完全加载图像时使其淡入。 And at load-time you position a loading image on top that you remove when you start fading in the image. 并且在加载时,将加载图像放置在图像上逐渐褪色时将其移除的顶部。

As the example you've given, is a plugin, perhaps you can even use that one instead of writing it yourself. 如您所给出的示例,它是一个插件,也许您甚至可以使用该插件而不是自己编写。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM