Php 预加载高质量背景图像，将其设置为库中每个项目的CSS背景图像

找不到符合以下特征的问题，所以我请求你们提供一些帮助。（例如，我找到了这个ref，但我似乎无法使它适应我的需要：）

我有一个PHP构建的图库。我有一个PHP代码，可以查找文件夹中的所有图像，然后将它们放到我的“Gallery”部分。这一切都很好。问题是，我想尽量减少加载时间

因为我使用的是

$（window）.load（）

，以便在总体加载完成后设置页面显示，所以当我的用户进入gallery部分时，这需要很长时间。为了让整个页面（加上部分）快速加载，然后让每个单独的图像慢慢加载，我想首先使用低质量的图像，这样页面可以快速加载，用户至少可以将其视为“预览”，然后高质量的图像应该预加载（可能由相同的

$（window.load（）

）触发）在后台，一旦单个加载过程完成，将最终替换低质量的

也许我的方法不是最好的（你必须记住，我最初只是想要简单的PHP到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);

$img_types=array（'png'，'jpg'）；
$imgs_gallery=array（）；
foreach（$img\u类型为$img\u类型）：
foreach（glob（'img/gallery/thumbs/...$img\u type）作为$th\u img\u文件名）：
$imgs_gallery[]。=$th_img_文件名；
endforeach；
endforeach；
$imgs\U gallery=阵列\U反转（$imgs\U gallery）；
foreach（$th\U img\U文件名形式的imgs\U图库）：
$stripped_filename=分解（'/'，$th_img_filename）；
$stripped_filename=$stripped_filename[3]；
$stripped_filename=str_replace（'th_'，''，$stripped_filename）；
$targetWidth=500；
$targetFinalResizeWidth=999；
//拇指
$th_img_size=getimagesize（$th_img_filename）；
$th_img_position=分解（'-'，$th_img_filename）；
$th_img_position=$th_img_position[1]；
$th_img_位置=爆炸（'.'，$th_img_位置）；
$th_img_position=preg_replace（'/[0-9]+/'，''，'$th_img_position[0]）；
$th_img_positions=数组（'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）；
如果（$th_resizeHeight'left'、'c'=>'center'、'r'=>'right'）；
$img_位置=$img_位置[$img_位置]；
$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;
?>

高清加载。。。