jQuery 페이지 에서 진행 바 구현 코드 불 러 오기

loading Process traditional
위의 그림 은 전통 적 인 워드 프레스 템 플 릿 이 브 라 우 저 에서 불 러 오 는 순 서 를 보 여 줍 니 다.Loading 바 의 등장 과 사라 짐 은 머리 끝 에 분포 되 어 있 습 니 다.
new loading bar만약 에 우리 가 페이지 의 서로 다른 위치 에 여러 개의 JS 를 배치 하면 모든 JS 는 Loading 줄 의 폭 을 점차적으로 증가 시 키 는 데 사용 된다 면 이 Loading 줄 은 더욱 실 용적 가치 가 있 을 것 이다.이 는 어느 정도 에 방문객 들 이 불 러 오 기 를 기다 리 는 지루 함 을 완화 시 키 는 동시에 페이지 가 불 러 오 는 진 도 를 객관 적 으로 나 타 낼 수 있다.jQuery 에 설 치 된 애니메이션 효 과 를 더 하면 브 라 우 저 자체 의 상태 항목 과 견 줄 수 있 습 니 다.먼저 프 리 젠 테 이 션:주소.프 리 젠 테 이 션 의 진도 바 효 과 를 얻 으 려 면 먼저 jQuery 프레임 워 크 를 도입 합 니 다.그리고태그 의 시작 위치 에 놓 습 니 다

<div id="loading"><div></div></div>
CSS 는 이렇게 쓸 수 있 습 니 다

#loading {
width:100px;
height:20px;
background:#A0DB0E;
padding:5px;
position:fixed;
left:0;
top:0;
}
#loading div {
width:1px;
height:20px;
background:#F1FF4D;
}
준 비 는 여기까지 만 하면 됩 니 다.이 어 그림 2 에 대한 이해 에 따라 템 플 릿 각 부분의 적당 한 위치 에 배치 하 십시오

<script type="text/javascript">
$("#loading div").animate({width:"16px"})
</script>
그 중에서 빨간색 수 치 는 불 러 오 는 순서에 따라 점차적으로 증가 해 야 합 니 다.footer.phop 까지.또한 footer.phop 의 맨 끝 에 놓 는 것 을 잊 지 마 세 요.

좋은 웹페이지 즐겨찾기