Home  >  Article  >  Web Front-end  >  Loading images and page effects implemented by jQuery oLoader_jquery

Loading images and page effects implemented by jQuery oLoader_jquery

WBOY
WBOYOriginal
2016-05-16 16:09:321171browse

How to use oLoader

Both oLoader and oPageLoader are based on jQuery, so please load the jquery library before calling. The author has integrated the two plug-ins together: jquery.oLoader.min.js. It has been packaged. Please click on the source code to download.
Calling jQuery oLoader is very simple, as follows:

Copy code The code is as follows:

$('#element').oLoader();

Use oLoader to load images:

Copy code The code is as follows:

$(function(){
$('img').oLoader({
WaitLoad: true,
fadeLevel: 0.9,
backgroundColor: '#fff',
Style:0,
Image: 'loader.gif'
});
});

Load the page using oLoader:

Copy code The code is as follows:

$('#ajax').oLoader({
url: 'test.html',
updateOnComplete: false
});

Of course, it also provides a wealth of options and callback functions, which can be set according to specific needs.

Copy code The code is as follows:

{
image: 'images/loader.gif', //Load animated images
style: 1, //loader style
modal: true, //Modal mask, if it is false, the mask layer will not be displayed
fadeInTime: 300, //Mask layer fade-in speed, milliseconds
fadeOutTime: 300, // Mask layer fadeout speed, milliseconds
fadeLevel: 0.7, //Mask layer transparency, 0-1
backgroundColor: '#000', //Background color
imageBgColor: '#fff', //loader animated picture background
imagePadding: '10',
showOnInit: true, //Initialize display loading animation
hideAfter: 0, //time in ms
url: false, //Ajax call parameters, the same below
Type: 'GET',
data: false,
updateContent: true, //Whether to replace the content returned by ajax
updateOnComplete: true,//Whether to immediately replace the content returned by the server
showLoader: true, //Whether to display the loader image
Effect: '', //Dynamic effect, supports door, slide, doornslide
wholeWindow: false, //when true, oLoader covers the whole window
lockOverflow: false, //locks body's overflow while loading
waitLoad: false, //Display the content when the element content is loaded
checkIntervalTime: 100, //interval which checks for position changes
//Callback function
complete: '', //Call when the animation ends and the content is loaded
onStart: '', //Called when animation starts
onError: '' //Called when an ajax request error occurs
}
How to use oPageLoader
oPageLoader can realize beautiful progress bar animation when loading the page. Calling oPageLoader is also very simple, as follows:
$(function(){
$.oPageLoader();
});
oPageLoader provides a wealth of options and method calls.
{
backgroundColor: '#000', //Background color
progressBarColor: '#f00', //Progress bar color
progressBarHeight: 3, //Progress bar height
progressBarFadeLevel: 1,
showPercentage: true,
percentageColor: '#fff',
percentageFontSize: '30px',
context: 'body',
affectedElements: 'img,iframe,frame,script',
ownStyle: false, //If set to true, the progress bar style can be customized
style: "
0%
",
lockOverflow: true,
images: [], //array of additional images, such as those from css files
wholeWindow: true,
fadeLevel: 1,
waitAfterEnd: 0,
fadeOutTime: 500,
//callbacks
complete: false, //Execute when the page is loaded and the animation ends
completeLoad: false, //Execute when the page has been loaded and does not require the animation to end
update: false
}

콜백 함수 업데이트는 페이지 요소가 로드될 때 호출됩니다. 반환되는 데이터는 다음과 같습니다.
data.total: 로드된 총 요소 수입니다.
data.loaded: 로드된 요소.
data.percentage: 백분율.
사용방법:

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

$.oPageLoader({
업데이트: 함수(데이터) {
//여기서 일할 수 있습니다
//data.percentage
// // 데이터.로드됨
// 데이터.총
}
})

위 내용은 이 글에서 공유한 jQuery oLoader 플러그인을 사용하는 방법입니다.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn