728x90
반응형
방문시 로딩을 만드는 이유
블로그나 웹페이지를 방문했는데 로딩을 하는 이유는
이미지나 모든 컨텐츠 모두 불러온 뒤 보기 편하게 하려는 이유도 있지만
더 큰이유는 모든 광고가 뜰때까지 기다려서 광고 클릭을 조금더 유도하기 위함일것입니다
저는 개인적으로 로딩이 긴 화면을 좋아하지 않아서 넣었다가 뺐습니다
특히 광고를 많이 넣으신 분이라면 로딩시간이 길어지기 때문에 조금 더 고려를 해보시는게 좋을 겁니다
편집하기
- 일단 로딩중이라는 것을 보여줄 gif파일을 다운로드 받습니다(loading.gif라고 검색하시면 됩니다)
- 티스토리관리자-꾸미기-스킨편집-html편집-파일업로드에 들어갑니다
- 추가를 눌러 gif파일을 업로드 합니다
- <head></head>사이에 밑의 코드를 넣습니다
<!--로딩-->
<style type="text/css">
#waiting {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: flex;
background: white;
z-index: 999;
opacity: 0.9;
}
#waiting > img {
display: flex;
width: fit-content;
height: fit-content;
margin: auto;
}
</style>
<div id="waiting">
<img src="./images/loading.gif">
</div>
<script type="text/javascript">
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
$("#waiting").fadeOut();
} else {
$(window).on('load', function() {
setTimeout(function(){
$("#waiting").fadeOut();
}, 500);
});
}
</script>
<!--로딩끝-->핸드폰 코드
애드센스 광고는 세팅을 어떻게 했는지마다 틀리긴 하지만 기본적으로 핸드폰에 광고를 더 많이 배치하기 때문에 핸드폰으로 볼 때는 상당히 오랜시간 기다려야 합니다 그래서 위 코드는 핸드폰으로 접속시에는 로딩시간을 기다리지 않게 코드를 작성했습니다
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
$("#waiting").fadeOut();
}이 부분이 핸드폰으로 접속했는지 판별하는 문장이니 핸드폰에서도 로딩을 하고 싶으신 분들은 위 코드 부분을 뺀
<script type="text/javascript">
$(window).on('load', function() {
setTimeout(function(){
$("#waiting").fadeOut();
}, 500);
});
</script>자바스크립트 부분을 이렇게 바꾸시면 됩니다
728x90
반응형
