php 网页预加载图片,如何从php或jquery中的链接预加载图像

我疯狂地搜索了我的画廊的解决方案，它不会将定中心功能应用于图像，因为我点击它的相应缩略图。相反，我必须点击缩略图至少两次才能在页面中心弹出大图。该画廊是一个jQuery / 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 '

';

if($index % $images_per_row == 0) { echo '

}

}

else {

echo '

There are no images in this gallery.

';

}

?>

$(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('

x

>

<

');

};

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", "");};

});});