jQuery oLoader_jquery로 구현된 이미지 및 페이지 효과 로드

oLoader 사용 방법

oLoader와 oPageLoader는 모두 jQuery를 기반으로 하므로 호출하기 전에 jquery 라이브러리를 로드하십시오. 작성자는 두 가지 플러그인을 함께 통합했습니다: jquery.oLoader.min.js 소스를 클릭하세요. 다운로드할 코드입니다.
jQuery oLoader 호출은 다음과 같이 매우 간단합니다.

코드 복사 코드는 다음과 같습니다.

$('#element').oLoader()

oLoader를 사용하여 이미지 로드:

코드 복사 코드는 다음과 같습니다.

$(함수(){
$('img').oLoader({
WaitLoad: 참,
페이드레벨: 0.9,
배경색상: '#fff',
스타일:0,
이미지: 'loader.gif'
})
})

oLoader를 사용하여 페이지 로드:

코드 복사 코드는 다음과 같습니다.

$('#ajax').oLoader({
URL: 'test.html',
updateOnComplete: 거짓
})

물론 특정 요구에 따라 설정할 수 있는 다양한 옵션과 콜백 기능도 제공합니다.

코드 복사 코드는 다음과 같습니다.

{
image: 'images/loader.gif', //애니메이션 이미지 로드
스타일: 1, //로더 스타일
modal: true, //모달 마스크, false인 경우 마스크 레이어가 표시되지 않습니다
fadeInTime: 300, //마스크 레이어 페이드인 속도, 밀리초
fadeOutTime: 300, // 마스크 레이어 페이드아웃 속도, 밀리초
fadeLevel: 0.7, //마스크 레이어 투명도, 0-1
backgroundColor: '#000', //배경색
imageBgColor: '#fff', //로더 애니메이션 그림 배경
imagePadding: '10',
showOnInit: true, //디스플레이 로딩 애니메이션 초기화
hideAfter: 0, //시간(ms)
url: false, //Ajax 호출 매개변수, 아래와 동일
유형: 'GET',
데이터: 거짓,
updateContent: true, //ajax에서 반환한 콘텐츠를 바꿀지 여부
updateOnComplete: true,//서버에서 반환된 콘텐츠를 즉시 교체할지 여부
showLoader: true, //로더 이미지 표시 여부
효과: '', //동적 효과, 도어, 슬라이드, 도어슬라이드 지원
WholeWindow: false, //true인 경우 oLoader가 전체 창을 덮습니다.
lockOverflow: false, //로드하는 동안 본문의 오버플로를 잠급니다.
waitLoad: false, //요소 콘텐츠가 로드될 때 콘텐츠를 표시합니다
checkIntervalTime: 100, //위치 변화를 확인하는 간격
//콜백 함수
Complete: '', //애니메이션이 끝나고 콘텐츠가 로드될 때 호출
onStart: '', //애니메이션이 시작될 때 호출됩니다
onError: '' //Ajax 요청 오류 발생 시 호출
}
oPageLoader 사용 방법
oPageLoader는 페이지를 로드할 때 아름다운 진행률 표시줄 애니메이션을 구현할 수 있으며 다음과 같이 매우 간단합니다.
$(함수(){
$.o페이지로더()
})
oPageLoader는 다양한 옵션과 메서드 호출을 제공합니다.
{
backgroundColor: '#000', //배경색
ProgressBarColor: '#f00', //진행률 표시줄 색상
ProgressBarHeight: 3, //진행률 표시줄 높이
ProgressBarFadeLevel: 1,
showPercentage: true,
백분율색상: '#fff',
백분율 글꼴 크기: '30px',
문맥: '본문',
영향을 받는 요소: 'img,iframe,frame,script',
ownStyle: false, //true로 설정하면 진행률 표시줄 스타일을 맞춤설정할 수 있습니다.
스타일: "

0%

",
lockOverflow: true,
Images: [], //CSS 파일의 이미지와 같은 추가 이미지 배열
전체 창: 사실,
페이드레벨: 1,
waitAfterEnd: 0,
fadeOutTime: 500,
//콜백
Complete: false, //페이지가 로드되고 애니메이션이 종료되면 실행
CompleteLoad: false, //페이지가 로드되었으며 애니메이션 종료가 필요하지 않을 때 실행
업데이트: 거짓
}

Das Callback-Funktionsupdate wird aufgerufen, wenn die Seitenelemente geladen werden. Die zurückgegebenen Daten sind:
data.total: Gesamtzahl der geladenen Elemente.
data.loaded: geladenes Element.
data.percentage: Prozentsatz.
Anwendung:

Code kopieren Der Code lautet wie folgt:

$.oPageLoader({
Update: Funktion(Daten) {
//hier können Sie arbeiten
//mit data.percentage
// // data.loaded
// data.total
}
});

Oben erfahren Sie, wie Sie das in diesem Artikel vorgestellte jQuery oLoader-Plug-in verwenden. Ich hoffe, es wird Ihnen gefallen.