如何預加載圖像從一個鏈接在PHP或jquery

Question

我瘋狂地搜索了一個解決方案，我的畫廊，它不應用中心功能的圖像，因爲我點擊它的各自的縮略圖。相反，我必須點擊縮略圖至少兩次大的圖像在頁面中央彈出。該畫廊是一個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> 

Answer 1

不要預先加載較大的圖像。您最好使用jQuery來顯示加載指示器（您可以在加載圖像時下載gif加載指示器 - http://ajaxload.info/）。圖像加載完成後，請取出指示器。