움직이는 로딩 이미지 반영을 위한 html 코드

 

블로그 또는 홈페이지의 html 최적화 상태에 따른 움직이는 로딩 이미지를 반영하기 위하여 html 코드 내용을 확인하고 수정하기, 블로그 로딩 이미지의 중요성, 블로그 로딩 속도 지연에 따른 해결 방법, 블로그 로딩 속도 개선 방법

 

로딩 이미지의 반영을 위한 html 코드

 

 

목차 ( 아래 제목 클릭 시 글 위치로 이동 )

1. 로딩 이미지 설치 html 코드
2. 로딩 이미지 설치 html 코드 수정

 

블로그와 홈페이지를 운영하면서 기본적으로 최적화가 잘 되어 있으면 걱정할 필요가 없지만 최적화를 위해서 html을 자체적으로 코딩한다는 것은 전문가가 아니고 서야 쉬운 일은 아닙니다.

 

방문자가 내 사이트로 방문을 하였을 때 로드 시간이 길다면 지루함에 따른 조기 이탈의 확률이 높아지고 이것은 곧 검색 엔진 최적화의 문제로 야기될 수 있기 때문에 어떻게든 방문자를 발목을 잡아 조금이라도 내 사이트에 머물 수 있는 여건을 만들어야 합니다.

 

이것을 위해 필요한 것이 바로 로딩 이미지를 반영하는 것으로 지루한 로드 시간에 시각적인 표현을 가미하여 흥미를 일으켜 조기 이탈을 방지하는 것입니다.

 

 

로딩 이미지 반영 방법
“클릭”

 

 

1. 로딩 이미지 설치 html 코드

<!--로딩 애니메이션-->
<script type="text/javascript">
 $(window).on('load', function () {
      setTimeout(function(){ 
            $("#load").fadeOut(); 
        }, 125);
 });
</script>
<style type="text/css">
#load {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: flex;
    opacity: 1;
    background: rgba(0, 0, 0, 0.1);
    z-index: 99;
    text-align: center;
}

#load > img { 
    display: flex; 
    margin: auto;
    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;
}
</style>
<div id="load">
    <img src="./images/loading.gif" alt="loading">
</div>
<!-- 로딩 애니메이션 끝-->

로딩 이미지 html 코드.txt

0.00MB

 

- "목차로 되돌아가기" -

 

 

2. 로딩 이미지 설치 html 코드 수정

일단 기본적으로 페이지의 로드가 완료될 때까지 로딩 이미지가 활성화됨으로 로딩 이미지의 활성화 시간을 별도로 수정할 수 없습니다.

 

로딩 이미지의 배경 설정 수정으로 배경색을 수정할 수 있으며, 추가로 불투명도를 수정하여 글의 내용을 로딩 중에 확인할 수 있습니다.

 

하기 코드 블록의 background: rgba(0, 0, 0, 0.1); 이면 투명, background: rgba(0, 0, 0, 1); 이면 불투명

 

<!--로딩 애니메이션-->
<script type="text/javascript">
 $(window).on('load', function () {
      setTimeout(function(){ 
            $("#load").fadeOut(); 
        }, 125);
 });
</script>
<style type="text/css">
#load {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: flex;
    opacity: 1;
    background: rgba(0, 0, 0, 1);
    z-index: 99;
    text-align: center;
}

#load > img { 
    display: flex; 
    margin: auto;
    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;
}
</style>
<div id="load">
    <img src="./images/loading.gif" alt="loading">
</div>
<!-- 로딩 애니메이션 끝-->

로딩 이미지 html 코드.txt

0.00MB

 

- "목차로 되돌아가기" -

 

여기까지 블로그 또는 홈페이지의 최적화 문제에 대해서 근본적인 원인을 찾고 해결할 수 있으면 좋지만 html 코딩 전문가가 아니고서야 쉬운 일은 아니기 때문에 누구나 쉽고 간략하게 해결할 수 있는 방법으로 로딩 이미지를 반영하는 것에 대해 정리하였으니 조금 이나마 도움이 됐으면 하는 바람입니다.