как предварительно загрузить изображения по ссылке в php или jquery

я лихорадочно искал решение для моей галереи, которое не применяет функцию центрирования к изображению, когда я нажимаю на соответствующую миниатюру. вместо этого я должен щелкнуть миниатюру как минимум дважды, чтобы большое изображение появилось в центре страницы. галерея - это jquery/php. я динамически загружал свои миниатюры с помощью php и связывал их с соответствующим большим изображением с тем же именем, используя php. Мне интересно, что предварительная загрузка большого изображения поможет решить эту проблему, если да, то как я могу предварительно загрузить их, видя, что это целый каталог с множеством изображений, поэтому я не загружал их вручную. скрипт ниже:

<?php  
   error_reporting(0);
/* function:  returns files from dir */
function get_files($images_dir,$exts = array('jpeg','gif','png','jpg')) {
$files = array();
  if($handle = opendir($images_dir)) {
while(false !== ($file = readdir($handle))) {
  $extension = strtolower(get_file_extension($file));
  if($extension && in_array($extension,$exts)) {
    $files[] = $file;
  }
}
closedir($handle);
  }
  return $files;
}

/* function:  returns a file's extension */
function get_file_extension($file_name) {
  return substr(strrchr($file_name,'.'),1);
}

$images_dir = 'hftpnyc/thumbs/';
$thumbs_dir = 'hftpnyc/thumbs/thumbnails/';
$thumbs_width = 100;
$images_per_row = 11;
$string = "";
/** generate photo gallery **/
$image_files = get_files($images_dir);
if(count($image_files)) {
$index = 0;
foreach($image_files as $index=>$file) {
$index++;
$thumbnail_image = $thumbs_dir.$file;
//if(!file_exists($thumbnail_image)) {
  //$extension = get_file_extension($thumbnail_image);
  //if($extension) {
    //make_thumb($images_dir.$file,$thumbnail_image,$thumbs_width);
  //}

//}

error_reporting(0);

echo '<div class="smllpic" style=" padding: 0px; margin: 0px; border: 1px solid black; display: block; width: 100px; height:100px; float: left; "><a href="'.$images_dir.$file.'" rel="lrgimg" class="lightbox"> <img id="thumbs" src="',$thumbnail_image,'" width="100px"/></a></div>';

if($index % $images_per_row == 0) { echo '<div class="clear"></div>'; }
  }
}

else {
echo '<p>There are no images in this gallery.</p>';
}


 ?>

<script type="text/javascript">

$(document).ready(function(){   

$('.smllpic img').hover(function () {
var $this   = $(this);
$this.stop().animate({'opacity':'1.0'},200);
},function () {
var $this   = $(this);
$this.stop().animate({'opacity':'0.7'},200);
});
   function centreit(){


//get the height and width of the modal  
var modal_height = $('.box').height();  
var modal_width = $('.box').width();   
//get the height and width of the page  
var window_width = $(window).width();  
var window_height = $(window).height();
//calculate top and left offset needed for centering  
var topp = (window_height - modal_height)/2;  
var left = (window_width - modal_width)/2;  

//apply new top and left css values  
$('.box').css({'top' : topp+'px' , 'left' : left+'px', 'right': left+'px','bottom':topp+'px'});
$('.motown').css({'top' : topp+'px' , 'left' : left+'px', 'right': left+'px','bottom':topp+'px'});
};
$('.lightbox').click(function(e) {
e.preventDefault(); // keeps new page from loading

var thisPicture = $(this).attr('href'); // path to full sized picture, 
function getit(){
$('body').append('<div class="backdrop" label="click to close"></div><div class="box" id="centre" ><div class="close">x</div><div style="cursor:pointer; opacity:1;font-family:Agency FB;margin-top:50%; right:-20px;position:fixed;color:white;font-size:50px; z-index:50;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-moz-box-shadow:0px 0px 5px #444444;-webkit-box-shadow:0px 0px 5px #444444;box-shadow:0px 0px 5px #444444;">></div><div style="cursor:pointer; opacity:.35;font-family:Agency FB;margin-top:50%; left:-20px; position:absolute; font-size:50px;color:white;  z-index:70;-webkit-border-radius:5px;-moz-border-radius: 5px; border-radius:5px;-moz-box-shadow:0px 0px 5px #444444; -webkit-box-shadow:0px 0px 5px #444444; box-shadow:0px 0px 5px #444444;"><</div><img class="motown" src="'+thisPicture+'" style="max-height:705px;max-width:905px;" ></div>');
};

centreit();

$(window).resize(function(){
$('.box').resize();
$('.motown').resize();
centreit();
});

if ($('.smllpic').click()){
getit();
centreit(); 
$("html").css("overflow", "hidden");
$('.backdrop').fadeTo(500,0.9);  
$('.box').children().fadeIn(1000);
};

//$('.backdrop').css({ 'display' : 'block', opacity : 0}); 

$('.close').click(function(){
close_box();});

$('.backdrop').click(function(){
close_box();});

function close_box(){
$('.backdrop').remove();
$('.box').remove();
$("html").css("overflow", "");};
});});
</script>