오늘의 명언
“ 당신은 소프트웨어 품질을 추구할 수도 있고, 포인터 연산을 할 수도 있다. 그러나 두 개를 동시에 할 수는 없다. ”
-
베르트랑 마이어 (Bertrand Meyer)
300x250
요즘 티스토리 광고 수익이 많이 내려가서.. 여러가지 시도를 해봤습니다.
그중에 블로그 이동간에 로딩화면에 대해서 포스팅 해볼까 합니다.
구글 애드센스 광고가 송출되기 까지 시간을 벌어주거나
포스팅 이동간에 로딩으로 표시해 보고자 합니다.
(그나저나.. 추석 여파인지? 아니면 무슨 문제인지 광고수익이 줄어서 화가나네요.. )
1. 로딩 이미지 업로드
티스토리 블로그관리 -> 스킨 편집 -> 파일 업로드로 가보시면
아래 추가 버튼으로 로딩 이미지를 업로드 해야합니다. 저는 포스팅 하단에 링크해둔 참고블로그에서
loading.gif 파일을 받아서 사용했습니다. 그래도 파일은 첨부해둘게요! 다운로드 받으셔서 업로드하시면 됩니다.
2. 로딩 이미지 HTML & CSS 코드 작성
티스토리 블로그관리 -> 스킨 편집 -> HTML로 이동하셔서 . 컨트롤 + F 또는 커맨드 + F 단축키로 body 를 검색합니다.
body 다음줄에.코드를 작성합니다.
- HTML 코드
<body class="min-w-xs overflow-x-hidden bg-h-100 text-h-900 dark:bg-h-800 dark:text-h-200" id="tt-body-page">
<!--로딩이미지-->
<div id="loadingImage">
<img src="./images/loading.gif">
</div>
<!--여기에 동작 코드를 작성할거에요-->
<script>
</script>
</body>
이어서 티스토리 블로그관리 -> 스킨 편집 -> CSS 로 이동하셔서
- CSS 코드
#loadingImage {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: flex;
background: white;
z-index: 999;
opacity: 0.7;
}
#loadingImage > img {
display: flex;
width: fit-content;
height: fit-content;
margin: auto;
box-shadow: none;
}
#wrapper {
overflow: hidden !important;
height: calc(100vh + 1px) !important;
}
#wrapper.loaded {
overflow: unset !important;
height: unset !important;
}#loadingImage: 이 요소는 로딩 이미지를 갖고 있으며 고정된 위치에 있습니다. 내부 내용은 페이지 로딩 중에 사용자에게 로딩 진행 상황을 시각적으로 표시합니다. 로딩 이미지는 가운데 정렬되어 있습니다.
#wrapper: 이 요소는 웹 페이지의 레이아웃을 관리하는데 사용됩니다. 페이지 내용이 요소 외부로 넘치지 않도록 하고, 스크롤이 가능해지면서 페이지의 내용이 표시됩니다. "loaded" 클래스가 추가되면 페이지 로딩이 완료되고 사용자에게 콘텐츠가 표시됩니다.
3. 로딩 이미지 동작 Script 작성
<body class="min-w-xs overflow-x-hidden bg-h-100 text-h-900 dark:bg-h-800 dark:text-h-200" id="tt-body-page">
<!--로딩이미지-->
<div id="loadingImage">
<img src="./images/loading.gif">
</div>
<!--여기에 동작 코드를 작성할거에요-->
<script>
<!--Dom 요소가 로드된 후-->
$(document).ready(function() {
<!--페이지 URL에 # 체크하고 있으면 로딩 완료-->
if (location.hash) {
$('#wrapper').addClass('loaded');
}
<!--로딩 완료했는지 체크 변수-->
let doneFlag = false;
<!--페이지 로딩이 3초 이내에 완료안되면 afterLoaded 호출-->
let loadingTimer = setTimeout(afterLoaded, 3000);
<!--페이지 로딩이 완료된 이후 실행되는 함수-->
function afterLoaded() {
if (doneFlag) return;
if (!location.hash) {
$('#wrapper').addClass('loaded');
}
<!--스크롤, 터치 이동, 및 마우스 휠 이벤트를 모두 무효화시켜 페이지 스크롤을 비활성화합니다.-->
$('#wrapper').off('scroll touchmove mousewheel');
<!---fadeOut 5초로 투명하게 되면서 로딩완료하고 부드럽게 스크롤 가능하게함 --->
$('#waiting').fadeOut(500, function() {
doneFlag = true;
<!--Jquery smoothScroll -->
smoothScroll();
});
}
<!--사용자가 페이지를 스크롤하거나 이동하려는 시도를 차단합니다.--->
$('#wrapper').on('scroll touchmove mousewheel', function(event) {
event.preventDefault();
event.stopPropagation();
return false;
});
<!---페이지의 모든 리소스(이미지, 스타일 시트, 스크립트 등)가 로드된 후 실행되는 이벤트 핸들러--->
$(window).on('load', function() {
clearTimeout(loadingTimer);
afterLoaded();
});
});
</script>
</body>
Script코드까지 작성해서 본인 블로그 사이트 확인해보시면 아래처럼 보입니다. 로딩화면이 잘나오고, 자연스럽게 스크롤도 가능합니다. 스크롤 잘되는거까지 gif로 담아보려 했지만 용량 초과네요..
참고블로그에서 참고해서 Jquery로 구현해봤는데 좀더 코드를 가독성있게 리팩토링했습니다.
주석 설명도 해놨으니 보시면 될거같아요 아 참고로 Jquery설정을 안하셨다면 head 태그안에 아래 스크립트 넣으시면 됩니다.
<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-3.5.1.min.js"></script>
반응형
잘못된 내용이 있으면 댓글 부탁드립니다. 감사합니다.
