내 사이트 코드 인 http://www.luischales.com/miami-quinces-photography.html과 관련하여 도움이 필요합니다. 처음으로 슬라이드를 열면 모든 이미지가로드 될 때까지 슬라이드가 시작되지 않으며 고객이 내 질문을 기다리는 것을 좋아하지 않으므로 요청에 따라 이미지를로드 할 수있는 방법을 가르쳐 줄 수 있습니까? 또는 적어도 첫 번째 이미지를로드 한 다음 다른 이미지를로드합니까?사전로드 기능을 변경하는 방법은 무엇입니까?
CODE
//<![CDATA[
$(function() {
var $tf_bg = $('#tf_bg'),
$tf_bg_images = $tf_bg.find('img'),
$tf_bg_img = $tf_bg_images.eq(0),
$tf_thumbs = $('#tf_thumbs'),
total = $tf_bg_images.length,
current = 0,
$tf_content_wrapper = $('#tf_content_wrapper'),
$tf_next = $('#tf_next'),
$tf_prev = $('#tf_prev'),
$tf_loading = $('#tf_loading');
//preload the images
$tf_bg_images.preload({
onComplete : function(){
$tf_loading.hide();
init();
}
});
//shows the first image and initializes events
function init(){
//get dimentions for the image, based on the windows size
var dim = getImageDim($tf_bg_img);
//set the returned values and show the image
$tf_bg_img.css({
width : dim.width,
height : dim.height,
left : dim.left,
top : dim.top
}).fadeIn();
//resizing the window resizes the $tf_bg_img
$(window).bind('resize',function(){
var dim = getImageDim($tf_bg_img);
$tf_bg_img.css({
width : dim.width,
height : dim.height,
left : dim.left,
top : dim.top
});
});
//expand and fit the image to the screen
$('#tf_zoom').live('click',
function(){
if($tf_bg_img.is(':animated'))
return false;
var $this = $(this);
if($this.hasClass('tf_zoom')){
resize($tf_bg_img);
$this.addClass('tf_fullscreen')
.removeClass('tf_zoom');
}
else{
var dim = getImageDim($tf_bg_img);
$tf_bg_img.animate({
width : dim.width,
height : dim.height,
top : dim.top,
left : dim.left
},350);
$this.addClass('tf_zoom')
.removeClass('tf_fullscreen');
}
}
);
//click the arrow down, scrolls down
$tf_next.bind('click',function(){
if($tf_bg_img.is(':animated'))
return false;
scroll('tb');
});
//click the arrow up, scrolls up
$tf_prev.bind('click',function(){
if($tf_bg_img.is(':animated'))
return false;
scroll('bt');
});
//mousewheel events - down/up button trigger the scroll down/up
$(document).mousewheel(function(e, delta) {
if($tf_bg_img.is(':animated'))
return false;
if(delta > 0)
scroll('bt');
else
scroll('tb');
return false;
});
//key events - down/up button trigger the scroll down/up
$(document).keydown(function(e){
if($tf_bg_img.is(':animated'))
return false;
switch(e.which){
case 38:
scroll('bt');
break;
case 40:
scroll('tb');
break;
}
});
}
//show next/prev image
function scroll(dir){
//if dir is "tb" (top -> bottom) increment current,
//else if "bt" decrement it
current = (dir == 'tb')?current + 1:current - 1;
//we want a circular slideshow,
//so we need to check the limits of current
if(current == total) current = 0;
else if(current < 0) current = total - 1;
//flip the thumb
$tf_thumbs.flip({
direction : dir,
speed : 400,
onBefore : function(){
//the new thumb is set here
var content = '<span id="tf_zoom" class="tf_zoom"><\/span>';
content +='<img src="' + $tf_bg_images.eq(current).attr('longdesc') + '" alt="Thumb' + (current+1) + '"/>';
$tf_thumbs.html(content);
}
});
//we get the next image
var $tf_bg_img_next = $tf_bg_images.eq(current),
//its dimentions
dim = getImageDim($tf_bg_img_next),
//the top should be one that makes the image out of the viewport
//the image should be positioned up or down depending on the direction
top = (dir == 'tb')?$(window).height() + 'px':-parseFloat(dim.height,10) + 'px';
//set the returned values and show the next image
$tf_bg_img_next.css({
width : dim.width,
height : dim.height,
left : dim.left,
top : top
}).show();
//now slide it to the viewport
$tf_bg_img_next.stop().animate({
top : dim.top
},700);
//we want the old image to slide in the same direction, out of the viewport
var slideTo = (dir == 'tb')?-$tf_bg_img.height() + 'px':$(window).height() + 'px';
$tf_bg_img.stop().animate({
top : slideTo
},700,function(){
//hide it
$(this).hide();
//the $tf_bg_img is now the shown image
$tf_bg_img = $tf_bg_img_next;
//show the description for the new image
$tf_content_wrapper.children()
.eq(current)
.show();
});
//hide the current description
$tf_content_wrapper.children(':visible')
.hide()
}
//animate the image to fit in the viewport
function resize($img){
var w_w = $(window).width(),
w_h = $(window).height(),
i_w = $img.width(),
i_h = $img.height(),
r_i = i_h/i_w,
new_w,new_h;
if(i_w > i_h){
new_w = w_w;
new_h = w_w * r_i;
if(new_h > w_h){
new_h = w_h;
new_w = w_h/r_i;
}
}
else{
new_h = w_w * r_i;
new_w = w_w;
}
$img.animate({
width : new_w + 'px',
height : new_h + 'px',
top : '0px',
left : '0px'
},350);
}
//get dimentions of the image,
//in order to make it full size and centered
function getImageDim($img){
var w_w = $(window).width(),
w_h = $(window).height(),
r_w = w_h/w_w,
i_w = $img.width(),
i_h = $img.height(),
r_i = i_h/i_w,
new_w,new_h,
new_left,new_top;
if(r_w > r_i){
new_h = w_h;
new_w = w_h/r_i;
}
else{
new_h = w_w * r_i;
new_w = w_w;
}
return {
width : new_w + 'px',
height : new_h + 'px',
left : (w_w - new_w)/2 + 'px',
top : (w_h - new_h)/2 + 'px'
};
}
});
//]]>
</script>
** 견적 OP ** : _ "누군가 요청시 이미지를로드 할 수있는 방법을 알려 줄 수 있습니까?"_ 기본적으로 이미지를 미리로드하지 않을 때 브라우저가 작동하는 방식입니다. – Sparky
감사합니다 Sparky672, 내가 어딘가에 언젠가 당신이 코드를 몇 가지 일을 할 필요가 언젠가는 읽을 필요가 원인을 묻습니다. 0은 아니오, 1은 그렇습니다. 어쩌면 스크립트를 말할 수있는 방법이 있습니다. 예압하지 마라. 빨리로드해야합니다. – lchales
모든 이미지가 앞쪽으로로드 될 때까지 기다리거나 각 이미지가 별도로로드 될 때까지 기다릴 것입니다. 어느 쪽이든, 각 이미지를로드하는 데 여전히 똑같은 시간이 소요됩니다. 사람들은 사전 로딩을 사용하여 모든 것을 앞에 놓습니다. 파일 크기를 줄이지 않으면 이미지를 더 빨리로드 할 수 없습니다. – Sparky