이미지 슬라이드를 한페이지 안에서 3개를 돌리려 하는데 너무 늦게 뜨네요 ㅠ
본문
스크립트 소스
<script src="http://dev.formshop.co.kr/js/slides.min.jquery.js"></script>
<script>
$(function(){
// Set starting slide to 1
var startSlide = 1;
// Get slide number if it exists
if (window.location.hash) {
startSlide = window.location.hash.replace('#','');
}
// Initialize Slides
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
generatePagination: true,
play: 5000,
pause: 0,
hoverPause: true,
// Get the starting slide
start: startSlide,
animationComplete: function(current){
// Set the slide number as a hash
window.location.hash = '#' + current;
}
});
});
$(function(){
// Set starting slide to 1
var startSlide = 1;
// Get slide number if it exists
if (window.location.hash) {
startSlide = window.location.hash.replace('#','');
}
// Initialize Slides
$('#slides2').slides({
preload: true,
preloadImage: 'img/loading.gif',
generatePagination: true,
play: 5000,
pause: 0,
hoverPause: true,
// Get the starting slide
start: startSlide,
animationComplete: function(current){
// Set the slide number as a hash
window.location.hash = '#' + current;
}
});
});
$(function(){
// Set starting slide to 1
var startSlide = 1;
// Get slide number if it exists
if (window.location.hash) {
startSlide = window.location.hash.replace('#','');
}
// Initialize Slides
$('#slides3').slides({
preload: true,
preloadImage: 'img/loading.gif',
generatePagination: true,
play: 5000,
pause: 0,
hoverPause: true,
// Get the starting slide
start: startSlide,
animationComplete: function(current){
// Set the slide number as a hash
window.location.hash = '#' + current;
}
});
});
</script>
html소스
<div id="container">
<div id="slides">
<div class="slides_container" style="width:548px; height:398px;">
<div class="slide" style="width:548px; height:398px;"><img src="img/main_img1.jpg" border="0" /></div>
<div class="slide" style="width:548px; height:398px;"><img src="img/main_img1.jpg" border="0" /></div>
<div class="slide" style="width:548px; height:398px;"><img src="img/main_img1.jpg" border="0" /></div>
<div class="slide" style="width:548px; height:398px;"><img src="img/main_img1.jpg" border="0" /></div>
<div class="slide" style="width:548px; height:398px;"><img src="img/main_img1.jpg" border="0" /></div>
</div>
</div>
</div>
html소스는 이런식으로 3개를 돌렸는데 이미지가 너무 늦게 뜨네요.
혹시 어떤 방법 없을까요..
답변 1
홈페이지 주소가
dev.formshop.co.kr 에요?
위에는 크롬 콘솔창으로 본 스샷인데요. index 페이지 에서만 14.7mb 를 다운받고 있네요. 꽤 많은 용량을 다운 받고 있습니다. ( 많은 용량을 다운 받으니, 늦게 뜨는거에요. )
현재 서버에서 캐쉬 설정을 꺼 놓았는지, 이미지를 cache 하지 않고, 계속 서버에서 다운 받고 있네요.
서버 관리자에게 문의해서 이미지나 css 등을 캐쉬 할수 있도록 요청해서 테스트 해 보세요. 그러면 어느정도 나아질겁니다.
지운낭자로 아이디 바꿔야겠어요. 이런 친절한 모습이라니.. ㅠㅠㅎㅎ
헉 ^^;
