display:none; 일때 실행여부 어떻게 되나요? 정보
display:none; 일때 실행여부 어떻게 되나요?본문
아래 문제를 가지고 하수끼리 설왕설래 하고있답니다.
<div id="test" style='display:none;'><? include_once "test.inc.php"; ?></div>
display:none; 이라면 test.inc.php는 인클루드 된것인가? 아닌가?
호출시 display:none; 이었다가 토글로 열어주는 방식인데 로딩속도가 상당히 느려졌습니다.
토글로 열때까지 test.inc.php가 들어오지않게 할 수 있을까요?
<div id="test" style='display:none;'><? include_once "test.inc.php"; ?></div>
display:none; 이라면 test.inc.php는 인클루드 된것인가? 아닌가?
호출시 display:none; 이었다가 토글로 열어주는 방식인데 로딩속도가 상당히 느려졌습니다.
토글로 열때까지 test.inc.php가 들어오지않게 할 수 있을까요?
댓글 전체
<div id="test" style='display:none;'><? include_once "test.inc.php"; ?></div>
를
<? include_once "test.inc.php"; ?>
로 바꾸고
test.inc.php 파일의 상단에는 <div id="test" style='display:none;'>를 하단에는 </div>를 넣는 방법을 사용해보세요
를
<? include_once "test.inc.php"; ?>
로 바꾸고
test.inc.php 파일의 상단에는 <div id="test" style='display:none;'>를 하단에는 </div>를 넣는 방법을 사용해보세요
실시간 답변 고맙습니다.^^
뭔가 서광이 비추는듯 하네요.
얼른 실행해보겠습니다.
뭔가 서광이 비추는듯 하네요.
얼른 실행해보겠습니다.
브라우저 입장에서 보면 차이가 있나요?
주소 표시줄에
javascript: document.all.test.style.display='block';
라고 쳐 보세요.
그리고 display는 html(css)이고 include는 php입니다.
둘은 완전 별도 입니다.
토글로 test.inc.php를 사용하시려면 ajax 비슷하게 해야 합니다.
javascript: document.all.test.style.display='block';
라고 쳐 보세요.
그리고 display는 html(css)이고 include는 php입니다.
둘은 완전 별도 입니다.
토글로 test.inc.php를 사용하시려면 ajax 비슷하게 해야 합니다.
속도가 느린 것은 크게 두 가지인데
태그 수가 엄청 많던가
아니면 DB에서 시간을 쓰던가
입니다.
태그 수가 엄청 많던가
아니면 DB에서 시간을 쓰던가
입니다.
rolo님 감사합니다.
질문을 정리하고 보니 로그아웃되어 다시 정리해서 올립니다.
브라우저별로 약간의 차이가 있습니다. msie가 조금 느리군요.
참고링크 http://phosay.com/g4/bbs/board.php?bo_table=demo_gallery 관련메뉴는 빨간폰트 부분입니다.
로딩 체커를 켜놓았습니다.
주소줄에 javascript: document.all.toggle_list.style.display='block'; 했을때 block 이 나옵니다.
죄송하지만 어떤뜻인지 이해를 못하고 있습니다.
그리고 팁텍에서 rolo 님의 Ajax 관련글을 다시 찾아서 보았습니다.
다른것 찾으러 학교 갔다가 Ajax이 무시무시한 놈이란걸 알게ㅤㄷㅚㅆ죠,, TT
//토글로 test.inc.php를 사용하시려면 ajax 비슷하게 해야 합니다.
시간이 되신다면 죄송하지만 간략한 예제를 부탁드려도 될런지요?
+++++++++++++++++++++++++++
해당 부분은 슬라이드쇼 관련부분입니다.
<div id="toggle_btn1" style='display:;'>토글 열기버튼- test2, 3을 열어줍니다.</div>
<div id="toggle_btn2" style='display:none;'>토글 닫기버튼- test2, 3을 닫고 열기버튼으로 복귀됩니다.</div>
<div id="toggle_list" style='display:none;'>토글 열기때 보이고 닫기때 감추어지는 실행 영역입니다.
<? include_once "slideshow.inc.php";//슬라이드 환경설정 파일 ?>
<img name='SlideShow'><!-- 출력부분 -->
</div>
+++++++++++++++++++++++++++
-, 좀 애매한것이 위처럼 넣어주기만 하면 실행되는 구조라서 꼼수로 토글로 여닫는 방법을 생각해 본 것입니다.
-, 토글이 열려있을때만 스크립트를 불러들여 보여주는가?
-, 아니면 display:none; 이라도 슬라이드쇼가 보이지만 않을뿐 진행되고 있다고 봐야되는가?
-, 그렇다면 최초 호출시 슬라이드쇼관련 파일들이 함께 로드되어 속도에 영향을 미치는가?
초보의 황당한 질문이라고 욕하지 마시고 방향을 잡아주시면 고맙겠습니다.
질문을 정리하고 보니 로그아웃되어 다시 정리해서 올립니다.
브라우저별로 약간의 차이가 있습니다. msie가 조금 느리군요.
참고링크 http://phosay.com/g4/bbs/board.php?bo_table=demo_gallery 관련메뉴는 빨간폰트 부분입니다.
로딩 체커를 켜놓았습니다.
주소줄에 javascript: document.all.toggle_list.style.display='block'; 했을때 block 이 나옵니다.
죄송하지만 어떤뜻인지 이해를 못하고 있습니다.
그리고 팁텍에서 rolo 님의 Ajax 관련글을 다시 찾아서 보았습니다.
다른것 찾으러 학교 갔다가 Ajax이 무시무시한 놈이란걸 알게ㅤㄷㅚㅆ죠,, TT
//토글로 test.inc.php를 사용하시려면 ajax 비슷하게 해야 합니다.
시간이 되신다면 죄송하지만 간략한 예제를 부탁드려도 될런지요?
+++++++++++++++++++++++++++
해당 부분은 슬라이드쇼 관련부분입니다.
<div id="toggle_btn1" style='display:;'>토글 열기버튼- test2, 3을 열어줍니다.</div>
<div id="toggle_btn2" style='display:none;'>토글 닫기버튼- test2, 3을 닫고 열기버튼으로 복귀됩니다.</div>
<div id="toggle_list" style='display:none;'>토글 열기때 보이고 닫기때 감추어지는 실행 영역입니다.
<? include_once "slideshow.inc.php";//슬라이드 환경설정 파일 ?>
<img name='SlideShow'><!-- 출력부분 -->
</div>
+++++++++++++++++++++++++++
-, 좀 애매한것이 위처럼 넣어주기만 하면 실행되는 구조라서 꼼수로 토글로 여닫는 방법을 생각해 본 것입니다.
-, 토글이 열려있을때만 스크립트를 불러들여 보여주는가?
-, 아니면 display:none; 이라도 슬라이드쇼가 보이지만 않을뿐 진행되고 있다고 봐야되는가?
-, 그렇다면 최초 호출시 슬라이드쇼관련 파일들이 함께 로드되어 속도에 영향을 미치는가?
초보의 황당한 질문이라고 욕하지 마시고 방향을 잡아주시면 고맙겠습니다.
주소줄에 javascript: document.all.toggle_list.style.display='block'; 했을때 block 이 나옵니다.
요거는 브라우저가 이미 해당 태그를 가지고 있음을 뜻합니다. 서버에서 새로이 가져 오는 것이 아닌란 거죠.
-, 좀 애매한것이 위처럼 넣어주기만 하면 실행되는 구조라서 꼼수로 토글로 여닫는 방법을 생각해 본 것입니다.
이 것은 단지 보이고 안 보이고 차이일 뿐 브라우저는 이미 렌더링해 놓은 상태입니다.
-, 토글이 열려있을때만 스크립트를 불러들여 보여주는가?
이걸 위해서 ajax 흉내를 내 보자는 거죠.
-, 아니면 display:none; 이라도 슬라이드쇼가 보이지만 않을뿐 진행되고 있다고 봐야되는가?
맞습니다.
-, 그렇다면 최초 호출시 슬라이드쇼관련 파일들이 함께 로드되어 속도에 영향을 미치는가?
여기에는 위에서 언급 했듯이 두 가지 요소가 있습니다.
태그가 엄청 많던가 디비에서 가져오는 시간이 길던가죠.
요거는 브라우저가 이미 해당 태그를 가지고 있음을 뜻합니다. 서버에서 새로이 가져 오는 것이 아닌란 거죠.
-, 좀 애매한것이 위처럼 넣어주기만 하면 실행되는 구조라서 꼼수로 토글로 여닫는 방법을 생각해 본 것입니다.
이 것은 단지 보이고 안 보이고 차이일 뿐 브라우저는 이미 렌더링해 놓은 상태입니다.
-, 토글이 열려있을때만 스크립트를 불러들여 보여주는가?
이걸 위해서 ajax 흉내를 내 보자는 거죠.
-, 아니면 display:none; 이라도 슬라이드쇼가 보이지만 않을뿐 진행되고 있다고 봐야되는가?
맞습니다.
-, 그렇다면 최초 호출시 슬라이드쇼관련 파일들이 함께 로드되어 속도에 영향을 미치는가?
여기에는 위에서 언급 했듯이 두 가지 요소가 있습니다.
태그가 엄청 많던가 디비에서 가져오는 시간이 길던가죠.
명쾌한 답변 감사합니다.
기초가 없다보니 구상자체에 결함이 있었군요.
참고해서 열심히 해보겠습니다.
기초가 없다보니 구상자체에 결함이 있었군요.
참고해서 열심히 해보겠습니다.
<script language="JavaScript" type="text/JavaScript">
// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000
//var slideShowSpeed = <?php echo (int)$HTTP_GET_VARS['slideshow'] ?>
//Link <a href="/gallery/displayimage.php?album=13&pid=645&slideshow=5000">슬라이드쇼</a>
// Duration of crossfade (seconds)
var crossFadeDuration = 3
// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below
<?php
//리스트에서 파일 출력 테스트
$j = 0;
for ($i=0; $i < count($list); $i++) {
$file = $data_path .'/'. $list[$i]['file'][0]['file'];
echo "Pic[$i] = '".$file."'\n";
}
?>
// =======================================
// do not edit anything below this line
// =======================================
var t
var j = <?php echo "$j\n" ?>
var p = Pic.length
var pos = j
var preLoad = new Array()
function preLoadPic(index)
{
if (Pic[index] != ''){
window.status='Loading : '+Pic[index]
preLoad[index] = new Image()
preLoad[index].src = Pic[index]
Pic[index] = ''
window.status=''
}
}
function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"
document.images.SlideShow.style.filter= "blendTrans(duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
pos = j
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
preLoadPic(j)
}
function endSlideShow(){
//self.document.location = './board.php?bo_table=<?=$bo_table?>&sca=<?=$ca_name?>'+pos //번호?
//self.document.location = './board.php?bo_table=<?=$bo_table?>&sca=<?=$ca_name?>'
self.document.location = '<?=$urlencode?>'
}
preLoadPic(j)
</script>
// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000
//var slideShowSpeed = <?php echo (int)$HTTP_GET_VARS['slideshow'] ?>
//Link <a href="/gallery/displayimage.php?album=13&pid=645&slideshow=5000">슬라이드쇼</a>
// Duration of crossfade (seconds)
var crossFadeDuration = 3
// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below
<?php
//리스트에서 파일 출력 테스트
$j = 0;
for ($i=0; $i < count($list); $i++) {
$file = $data_path .'/'. $list[$i]['file'][0]['file'];
echo "Pic[$i] = '".$file."'\n";
}
?>
// =======================================
// do not edit anything below this line
// =======================================
var t
var j = <?php echo "$j\n" ?>
var p = Pic.length
var pos = j
var preLoad = new Array()
function preLoadPic(index)
{
if (Pic[index] != ''){
window.status='Loading : '+Pic[index]
preLoad[index] = new Image()
preLoad[index].src = Pic[index]
Pic[index] = ''
window.status=''
}
}
function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"
document.images.SlideShow.style.filter= "blendTrans(duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
pos = j
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
preLoadPic(j)
}
function endSlideShow(){
//self.document.location = './board.php?bo_table=<?=$bo_table?>&sca=<?=$ca_name?>'+pos //번호?
//self.document.location = './board.php?bo_table=<?=$bo_table?>&sca=<?=$ca_name?>'
self.document.location = '<?=$urlencode?>'
}
preLoadPic(j)
</script>
http://sir.co.kr/bbs/tb.php/pl_dhtml_javascript/179
한번 파일을 만들어서 해 보시면
parent.document.all.content.innerText="여기가 바뀌는 부분입니다.";
이 문장 때문에
본문 내용이 바뀌는 것을 알 수 있습니다.
여기에 HTML 태그가 있는 아주 아주 긴 문자열을 대입해 주면
되는 겁니다. 이 때에는 innerHTML이라고 써 주면 됩니다.
한번 파일을 만들어서 해 보시면
parent.document.all.content.innerText="여기가 바뀌는 부분입니다.";
이 문장 때문에
본문 내용이 바뀌는 것을 알 수 있습니다.
여기에 HTML 태그가 있는 아주 아주 긴 문자열을 대입해 주면
되는 겁니다. 이 때에는 innerHTML이라고 써 주면 됩니다.
오늘 몇번 읽어본 부분입니다.
어떤방법으로 구현해볼지 생각중입니다.
시간을 두고 차근차근 해보겠습니다.
막히면 다시 문의 드리도록 하겠습니다.
어떤방법으로 구현해볼지 생각중입니다.
시간을 두고 차근차근 해보겠습니다.
막히면 다시 문의 드리도록 하겠습니다.
단지 이미지만 가져 오기 때문에 DOM(DHTML)을 써도 됩니다.
예전에 자바 가지고 게시판 리스트를 이런 식으로 했는데 복잡하기만 하더군요.
예전에 자바 가지고 게시판 리스트를 이런 식으로 했는데 복잡하기만 하더군요.
이 슬라이드 쇼란 것이 모든 이미지를 다 가져 와서
단지 순서대로 보여주는 것 같습니다.
따라서 해당 이미지를 모두 가져오기 때문에 시간이 걸린다고 생각됩니다.
해결 방법은......
슬라이드 쇼를 진행할 때 보이는 순서가 되면 그 때 그 이미지를 지정해서 가져 오는 방법이 좋은 거 같습니다.
loop {
timer( 10초);
document.all.img_id.src= image_path[ i];
}
단지 순서대로 보여주는 것 같습니다.
따라서 해당 이미지를 모두 가져오기 때문에 시간이 걸린다고 생각됩니다.
해결 방법은......
슬라이드 쇼를 진행할 때 보이는 순서가 되면 그 때 그 이미지를 지정해서 가져 오는 방법이 좋은 거 같습니다.
loop {
timer( 10초);
document.all.img_id.src= image_path[ i];
}
보니까 RSS 왼쪽에 있는 슬라이드 쇼가 위의 방법 대로 되어
있나 봅니다.
있나 봅니다.
감사합니다.
늦은 저녁 먹고 한판 붙어봐야할것 같네요.
귀한 주말 저녁에 시간을 할애해주셔서 감사하고 또한 죄송스럽습니다.
늦은 저녁 먹고 한판 붙어봐야할것 같네요.
귀한 주말 저녁에 시간을 할애해주셔서 감사하고 또한 죄송스럽습니다.
단순하지만 리스트 목록에 보여지는대로(등록순이든 조회순이든 아니면 특정 카테고리든 정렬옵션을 준대로) 슬라이드되는점이 괜찮아서 나름대로 어렵게 붙여본 것입니다.
처음에 모든 이미지를 다 가져오는것이 문제군요.
rolo님의 조언에 따라 수정해보고 결과를 올리도록 하겠습니다.
배려해주셔서 깊이 감사드립니다.
편안한밤 되세요!!
처음에 모든 이미지를 다 가져오는것이 문제군요.
rolo님의 조언에 따라 수정해보고 결과를 올리도록 하겠습니다.
배려해주셔서 깊이 감사드립니다.
편안한밤 되세요!!
아닙니다 덕분에 포인트 많이 올라갔습니다. ^^