클라이언트가 페이지 로더를 요청했으며, 방문자가 컨텐츠가 진행 중임을 방문자에게 알리기 위해 "매력적인"것이 있습니다. 이것은 표준 HTML 콘텐츠 (텍스트, 이미지 등)를위한 것입니다.페이지 로더 (HTML 컨텐츠)에 대한 권장 사항이 필요합니다.
나는 웹에서 약간을 보았지만 그 중 많은 부분이 날짜가 정해져 있습니다. 나는 구현할 고통이 아닌 여전히 괜찮은 것처럼 보이는 것을 찾고 있습니다.
미리 감사드립니다.
나만의 것을 만드는 것은 어렵지 않습니다. 애니메이션 GIF가 표시된 페이지를 가지고 AJAX를 사용하여 페이지를로드 할 수 있습니다. "AJAX loading image"와 같은 것을 검색하여 멋진 로딩 GIF를 얻을 수 있습니다. 이것은 당신에게 쉬운 것처럼 보일 수도 있고 그렇지 않을 수도 있지만, jQuery와 PHP를 사용한다면 나에게 너무 힘들지 않습니다.
예 두 개의 파일 (test1.htm과 test2.htm)이 있다고 가정 해보십시오. test1 (페이지의 일부가 빠르게로드되어야 함)에서 test2 (로드하는 데 약간 걸리는)의 내용을 표시하려고합니다. 여기에 내가 만든 두 파일 (이것은 jQuery를 사용)의 :
test1.htm
<h2>Dynamically Loaded Content</h2>
<p>Hello World!</p>
그래서 이것이 당신이 할 계획하는지에 대한 작업을해야
<head>
<script language="javascript" type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.get('test2.htm', function(data) {
$('#Content').html(data);
});
});
</script>
</head>
<body>
<div id="Content" >
<img src="ajax-loader-image.gif" />
</div>
</body>
</html>
test2.htm. 중요한 점은 페이지를 빠르게로드하는 부분과 천천히로드하는 부분으로 페이지를 분할하려고 시도하는 것입니다.
멋진 로더를 만들려면 멋진 애니메이션 이미지를 사용해야합니다. 하지만 애니메이션 이미지와 jQuery의 조합을 사용하는 것이 좋습니다. jQuery에는 많은 애니메이션을 사용할 수 있기 때문입니다. 당신은 같은, 자세한 내용은 jQuery Animation API How to add loader
귀하의 HTML을 아래의 링크를 체크 아웃 할 수 있습니다 -
<div class="loader"></div>
귀하의 CSS
같은.loader {
position: absolute;
margin: 0 auto;
z-index: 9999;
background: url('icon-loader.gif') no-repeat;
top: 50 px;
cursor: wait;
}
같은 자바 스크립트 코드 -
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(window).load(function(){
$('div.loading').fadeOut(1000);
});
</script>
I AJAX 로딩을 찾았습니다. mage하지만 코드 부분에서 아직 아무것도 찾을 수 없습니다. 당신이 제공 할 수있는 구체적인 것은 무엇입니까? 감사. – fmz
내가 요리 할 수있는 것을 보자 ... – Peter