Can't quite find an issue that fits the following characteristics, so I'm Asking you guys for some help. (I found this ref, for example, but I can't seem to be able to adapt it to my needs: jquery background image preloading)
I have a PHP-built gallery. I have a PHP code that looks for all images in a folder and then puts them up into my "Gallery" section. This is all working great. The issue is that I would like to minimize load-time.
Because I am using the $(window).load() in order to set the page display once overall load is completed, when my user gets to the gallery section, this takes a long time. In order for the entire page (plus section) to quickly load and then each individual image to take its time, I would like to first use low-quality images so the page loads quickly and the user can at least see them as "previews," then the high-quality images should preload (probably triggered by the same $(window).load()) in the background to eventually substitute the low-quality ones once their individual load process is complete.
Perhaps my approach has not been the best (you must keep in mind that I initially just wanted the simple PHP-to-Gallery function) but it's all I have so far.
So, first, I now have a folder called "gallery" and a child folder called "thumbs". In both folder I have the same images: one, high-qual, the other, low-qual.
I have the following PHP that takes care of finding all my images and getting info from them:
$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);
Then comes the HTML that runs for each image found:
<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;
?>
All the PHP code does is find the images and put them into an array, invert the order of the array, then output the images, finding their height and width and all that in order to make them look nice and all the same size in the gallery.
As you can see, the 'thumb' image is displayed as the background-image of the imgholder. On top of that layer, the "HD Loading..." text will show in order to let the user now that better-quality photos are on the way.
What I want to achieve (and for this I am thinking jQuery) is that, once the page is fully loaded and everything is displayed fine, so the user doesn't have to wait, the high-quality photos start preloading or loading in the background. To be substituted, as each one finished loading, as the background-image of its respective imgholder; upon which time the "HD Loading..." div should be called to hide() or fadeOut().
