Loading images and page effects implemented by jQuery oLoader_jquery

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 플러그인을 사용하는 방법입니다.