[jQuery/CSS] 티스토리 로딩 이미지 넣기

로딩이 허전한 것 같아 로딩 이미지를 넣으려고 해봤습니다. 그러나 제 블로그 특성상 이미지는 lazy loading이 되기 때문에 텍스트가 다 로딩된 이후에도 계속 로딩 이미지가 표출되는 문제가 있더라구요. 그래서 그냥 이렇게 포스팅으로만 남겨둡니다.

 

@keyframe에 지정된 loading_dance문을 통해서, 헤더의 누에고치 이미지(_nueelogo.svg)가 좌우 15도 각도씩 귀엽게 춤을 추게 됩니다.

 

show - delay - hide라는 좀 더러워보이는 코드를 쓴 건 저의 실력 부족 때문입니다 ㅋㅋㅋ

 

HTML

<script type="text/javascript">
 $(window).on('load', function () {
	   $("#load").animate( {opacity:'0'}, 700 );
      $("#load").show(0).delay(1).hide(0);
 });
</script>
<div id="load">
	<img src="./images/_nueelogo.svg" alt="loading">
	<p>누에고치의 누리집</p>
</div>

 

CSS

#load {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: fixed;
	display: block;
	opacity: 0.8;
	background: white;
	z-index: 99;
	text-align: center;
}

#load > img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
	z-index: 100;
	animation-name: loading_dance;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	font-family:'Noto Serif','Noto Serif KR',serif;
	
}
	@keyframes loading_dance {
  0%   {transform:translate(-50%, -50%) rotate(-15deg)}
  50%  {transform:translate(-50%, -50%) rotate(15deg)}
  100% {transform:translate(-50%, -50%) rotate(-15deg)}
}

	#load > p{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
	z-index: 100;
	animation-name: loading_dance;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	font-family:'Noto Sans','Noto Sans KR',sans-serif;

 

로딩 이미지 예제