블로그 하다 보면 페이지 로딩이 다 안 끝났는데 스크롤 내리는 경우가 많다.
다 로딩되고 스크롤되게 하면 좋을 것 같다는 생각도 해본다.
페이지 로딩되는 동안 스크롤 준비 중 표시& 스크롤 막는 기능이다.
필요한 사람은 가져다 본인에 맞게 수정해 쓰셔도 됩니다.
아래 부분은 <body> 태그 바로 밑에 그냥 카피 앤 복사 넣기 하면 됨
<!-- 페이지 로딩 코드 start -->
<style type="text/css">
<!-- 로딩 시 반투명 레이어 -->
#waiting {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: flex;
background: white;
z-index: 999;
opacity: 0.5;
}
<!-- 로딩시 로딩 이미지 쓸 수 있다.-->
<!-- #waiting > img {
display: flex;
width: fit-content;
height: fit-content;
margin: auto;
} -->
<!--이미지 대신 텍스트.-->
#waiting > #LoadingText {
display: flex;
width: fit-content;
height: fit-content;
margin: auto;
}
</style>
<div id="waiting">
<p id="LoadingText" data-ke-size="size16"><span style="color: #000000;"><b>loading...</b></span></p>
<!-- 로딩시 이미지 대신 텍스트 가능-->
<!--<img src="./images/loading.gif">-->
</div>
<script type="text/javascript">
$(window).on('load', function() {
setTimeout(function() {
$("#waiting").fadeOut();
document.body.style.overflow = 'auto';
});
<!-- 페이지로드후 반투명 레이어, 문구, 스크롤 막는 클래스 제거... 시간 조절 가능 0 대신 300넣으면 3초후 500넣으면 5초후-->
</script>
<!-- 페이지 로딩 코드 end -->
'파이프라인·블로그 > 블로그문제' 카테고리의 다른 글
| 티스토리 네이버 검색 유입 1/15 토막 나다.[저품질?] (16) | 2022.10.22 |
|---|---|
| 티스토리 네이버 저품질 먹은건가? (24) | 2022.10.21 |
| 티스토리 모바일 강제 리디(다)이렉션이 지속 됐다면... 벌어지는 일 (11) | 2022.10.19 |
| 애드센스 문제 생기기전 페이지뷰당 노출수 비율 (16) | 2022.10.04 |
| 티스토리 모바일 웹 자동 연결 설정을 바꾸면 pc웹으로 접속하게 된다. (8) | 2022.10.03 |
댓글