Question

无法找到符合以下特征的问题，所以我向你们寻求帮助。（例如，我发现了这个参考，但我似乎无法根据我的需要调整它：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的{{1}}。在该图层的顶部，将显示“HD Loading ...”文本，以便让用户现在可以获得更高质量的照片。

我想要实现的目标（并且为此我想 jQuery ）就是这样，一旦页面完全加载并且一切都显示得很好，那么用户就不必等等，高质量的照片开始预加载或在后台加载。在每个人完成加载时被替换为其各自imgholder的{{1}};在什么时候应该将“HD Loading ...”background-image调用到imgholder或div。

预加载要为Gallery中每个项目设置为CSS背景图像的高质量背景图像

0 个答案: