고정 헤더 영역
 |
 |
 |
 |
 |
 |
 |
상세 컨텐츠
본문
반응형
모바일웹이나 웹앱/ 하이브리드앱 첫 화면 인트로페이지 에 이미지를 보여주는 경우,
부드럽게 열렸다가 2~3초 지난 후에 다음페이지로 연결되게 하기위한 코드입니다.
우선, 이미지가 부드럽게 로딩되기 위해서는 jquery 의 fadein() 을 사용합니다.
<img id = "loadingimg" style="display:none;" src="images/img_intro.jpg" alt="" width="100%" >
<script>
$(document).ready(function () {
setTimeout(function() {
$("#loadingimg").fadeIn(1500);
});
});
</script>
바로 이 부분인데요, 아이디가 loadingimg 인 img 태그에 fadein 함수를 적용하여 1500 즉 이미지 로딩시 1.5초의 시간동안 fadein (천천히 열림)처리를 하늑겁니다. 물론, 문서내의 모든 객체가 로딩된 후에 실시해야 하니까 $(document).ready 내에 기술해야 하겠지요
또 한가지, 인트로페이지 로딩후 3초후에 다른페이지가 로딩되게 하려면, 아래와같이 meta 태그만 사용하면 됩니다.
<META HTTP-EQUIV="Refresh" CONTENT="3;URL=./main.html">
CONTENT 부부의 3 은 3초후에 그 옆에 기술된 URL 로 전환되게 하라는 뜻입니다.
아래에 전체 소스가 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<META HTTP-EQUIV="Refresh" CONTENT="3;URL=./main.html">
<title></title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
</head>
<body class="main">
<img id = "loadingimg" style="display:none;" src="images/img_intro.jpg" alt="" width="100%" >
<script>
$(document).ready(function () {
setTimeout(function() {
$("#loadingimg").fadeIn(1500);
});
});
</script>
</body>
</html>
반응형
'IT공부방 > jQuery, ajax, java' 카테고리의 다른 글
| javascript 클립보드 복사하기 clipboard copy (6) | 2019.01.14 |
|---|---|
| 일정시간 간격으로 이미지 변환,전환 시키기 javascript setTimeout, setInterval, clearTimeout (3) | 2018.12.13 |
| javascript 마우스클릭위치 알아내기 , 클릭된 태그(엘리먼트)알아내기 (0) | 2018.03.27 |
| jquery barcode 출력 (바코드출력) 하기, jquery공개소스 (0) | 2018.03.20 |
| 360도 이미지를 볼 수있는 jQuery 소스 (VR 파노라마뷰어, 이미지뷰어) (20) | 2017.08.05 |
댓글 영역