1

无法完全找到符合以下特征的问题，所以我向你们寻求帮助。（例如，我找到了这个参考，但我似乎无法适应我的需要：jquery background image preloading）

我有一个 PHP 构建的画廊。我有一个 PHP 代码，用于查找文件夹中的所有图像，然后将它们放入我的“图库”部分。这一切都很好。问题是我想最小化加载时间。

因为我使用的$(window).load()是为了在整体加载完成后设置页面显示，所以当我的用户进入画廊部分时，这需要很长时间。为了让整个页面（加部分）快速加载，然后每个单独的图像都花时间，我想首先使用低质量的图像，以便页面快速加载并且用户至少可以将它们视为“预览， “那么高质量的图像应该$(window).load()在后台预加载（可能由相同的触发），以便在它们的单独加载过程完成后最终替换低质量的图像。

也许我的方法不是最好的（你必须记住，我最初只是想要简单的 PHP-to-Gallery 函数），但这就是我目前所拥有的一切。

所以，首先，我现在有一个名为“gallery”的文件夹和一个名为“thumbs”的子文件夹。在这两个文件夹中，我都有相同的图像：一个是高质量的，另一个是低质量的。

我有以下 PHP 负责查找我的所有图像并从中获取信息：

$img_types = array('png','jpg');
$imgs_gallery = array();
foreach($img_types as $img_type):
    foreach(glob('img/gallery/thumbs/*.'.$img_type) as $th_img_filename):
        $imgs_gallery[] .= $th_img_filename;
    endforeach;
endforeach;
$imgs_gallery = array_reverse($imgs_gallery);
foreach($imgs_gallery as $th_img_filename):
    $stripped_filename = explode('/',$th_img_filename);
    $stripped_filename = $stripped_filename[3];
    $stripped_filename = str_replace('th_','',$stripped_filename);

    $targetWidth = 500;
    $targetFinalResizeWidth = 999;

    //Thumb
    $th_img_size = getimagesize($th_img_filename);
    $th_img_position = explode('-',$th_img_filename);
    $th_img_position = $th_img_position[1];
    $th_img_position = explode('.',$th_img_position);
    $th_img_position = preg_replace('/[0-9]+/', '', $th_img_position[0]);
    $th_img_positions = array('l'=>'left','c'=>'center','r'=>'right');
    $th_img_position = $th_img_positions[$th_img_position];
    $th_sourceWidth = $th_img_size[0];
    $th_sourceHeight = $th_img_size[1]; 
    $th_sourceRatio = $th_sourceWidth / $th_sourceHeight;
    $th_scale = $th_sourceWidth / $targetWidth;
    $th_scaleFinalResize = $th_sourceWidth / $targetFinalResizeWidth;   
    $th_resizeWidth = (int)($th_sourceWidth / $th_scale);
    $th_resizeHeight = (int)($th_sourceHeight / $th_scale);
    $th_finalResizeHeight = (int)($th_sourceHeight / $th_scaleFinalResize);     
    if($th_resizeHeight<499):
        $th_imgholderHeight = $th_resizeHeight;
    else:
        $th_imgholderHeight = 499;
    endif;

    //BIG Img
    $img_filename = str_replace('thumbs/th_','',$th_img_filename);
    $img_size = getimagesize($img_filename);
    $img_position = explode('-',$img_filename);
    $img_position = $img_position[1];
    $img_position = explode('.',$img_position);
    $img_position = preg_replace('/[0-9]+/', '', $img_position[0]);
    $img_positions = array('l'=>'left','c'=>'center','r'=>'right');
    $img_position = $img_positions[$img_position];
    $sourceWidth = $img_size[0];
    $sourceHeight = $img_size[1];   
    $sourceRatio = $sourceWidth / $sourceHeight;
    $scale = $sourceWidth / $targetWidth;
    $scaleFinalResize = $sourceWidth / $targetFinalResizeWidth; 
    $resizeWidth = (int)($sourceWidth / $scale);
    $resizeHeight = (int)($sourceHeight / $scale);
    $finalResizeHeight = (int)($sourceHeight / $scaleFinalResize);

然后是为找到的每个图像运行的 HTML：

    <div class="element one_photo photo">
        <div class="hd">HD Loading...</div>
        <div class="mask">
            <div class="masktxt">
                <a href="#">ZOOM</a>
            </div>
        </div>
        <div class="imgholder" style="<?php
                                echo 'width: 199px;';
                                echo 'height: '.$th_imgholderHeight.'px;';
                                echo 'background-image: url('.$th_img_filename.');';
                                echo 'background-size: '.$th_resizeWidth.'px '.$th_resizeHeight.'px;';
                                echo 'background-position: '.$th_img_position.' center';
                                ?>">
        </div>
    </div>
<?php
endforeach;
?>

PHP 代码所做的就是找到图像并将它们放入一个数组中，颠倒数组的顺序，然后输出图像，找到它们的高度和宽度以及所有这些，以使它们看起来漂亮并且在画廊。

如您所见，“拇指”图像显示background-image为imgholder. 在该层之上，将显示“HD Loading...”文本，以便让用户现在可以看到质量更好的照片。

我想要实现（为此我在想jQuery）是，一旦页面完全加载并且一切都显示正常，所以用户不必等待，高质量的照片开始预加载或加载背景。被替换，作为每个完成加载，作为background-image其各自的imgholder；届时div应将“HD Loading...”调用到hide()或fadeOut()。

4

0 回答 0