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를 사용하는 것이 좋습니다 (이미지를로드하는 동안 - http://ajaxload.info/에서 gif 로딩 표시기를 다운로드 할 수 있습니다). 이미지가로드되면 표시기를 제거하십시오.