Memuatkan imej dan kesan halaman yang dilaksanakan oleh jQuery oLoader_jquery

Cara menggunakan oLoader

Kedua-dua oLoader dan oPageLoader adalah berdasarkan jQuery, jadi sila muatkan perpustakaan jquery sebelum membuat panggilan kod untuk dimuat turun.
Memanggil jQuery oLoader adalah sangat mudah, seperti berikut:

Salin kod Kod adalah seperti berikut:

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

Gunakan oLoader untuk memuatkan imej:

Salin kod Kod adalah seperti berikut:

$(function(){
$('img').oLoader({
WaitLoad: benar,
Tahap pudar: 0.9,
Warna latar belakang: '#fff',
Gaya:0,
Imej: 'loader.gif'
});
});

Muat halaman menggunakan oLoader:

Salin kod Kod adalah seperti berikut:

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

Sudah tentu, ia juga menyediakan pelbagai pilihan dan fungsi panggil balik, yang boleh ditetapkan mengikut keperluan khusus.

Salin kod Kod adalah seperti berikut:

{
imej: 'images/loader.gif', //Muat imej animasi
gaya: 1, //gaya pemuat
modal: true, //Modal mask, jika ia palsu, lapisan mask tidak akan dipaparkan
fadeInTime: 300, //Lapisan topeng kelajuan pudar masuk, milisaat
fadeOutTime: 300, // Kelajuan fadeout lapisan topeng, milisaat
fadeLevel: 0.7, //Ketelusan lapisan topeng, 0-1
Warna latar belakang: '#000', //Warna latar belakang
imageBgColor: '#fff', //latar belakang gambar animasi pemuat
imagePadding: '10',
showOnInit: true, //Memulakan animasi memuatkan paparan
hideAfter: 0, //masa dalam ms
url: false, //parameter panggilan Ajax, sama di bawah
Taip: 'DAPAT',
data: palsu,
updateContent: true, //Sama ada untuk menggantikan kandungan yang dikembalikan oleh ajax
updateOnComplete: true,//Sama ada hendak menggantikan kandungan yang dikembalikan oleh pelayan dengan segera
showLoader: benar, //Sama ada untuk memaparkan imej pemuat
Kesan: '', //Kesan dinamik, menyokong pintu, gelongsor, gelongsor pintu
wholeWindow: palsu, //apabila benar, oLoader meliputi seluruh tetingkap
lockOverflow: palsu, //mengunci limpahan badan semasa memuatkan
waitLoad: false, //Paparkan kandungan apabila kandungan elemen dimuatkan
checkIntervalTime: 100, //selang yang menyemak perubahan kedudukan
//Fungsi panggil balik
complete: '', //Panggil apabila animasi tamat dan kandungan dimuatkan
onStart: '', //Dipanggil apabila animasi bermula
onError: '' //Dipanggil apabila ralat permintaan ajax berlaku
}
Cara menggunakan oPageLoader
oPageLoader boleh merealisasikan animasi bar kemajuan yang indah apabila memuatkan halaman Memanggil oPageLoader juga sangat mudah, seperti berikut:
$(function(){
$.oPageLoader();
});
oPageLoader menyediakan pelbagai pilihan dan panggilan kaedah.
{
Warna latar belakang: '#000', //Warna latar belakang
progressBarColor: '#f00', //Warna bar kemajuan
progressBarHeight: 3, //Ketinggian bar kemajuan
progressBarFadeLevel: 1,
tunjukkanPeratusan: benar,
peratusanWarna: '#fff',
percentageFontSize: '30px',
konteks: 'badan',
Elemen yang terjejas: 'img,iframe,frame,script',
ownStyle: false, //Jika ditetapkan kepada benar, gaya bar kemajuan boleh disesuaikan
gaya: "

0%

",
lockOverflow: benar,
imej: [], //susun imej tambahan, seperti daripada fail css
seluruhTetingkap: benar,
pudarTahap: 1,
tungguAfterEnd: 0,
fadeOutTime: 500,
//panggil balik
complete: false, //Laksanakan apabila halaman dimuatkan dan animasi tamat
completeLoad: false, //Laksanakan apabila halaman telah dimuatkan dan tidak memerlukan animasi untuk ditamatkan
kemas kini: palsu
}

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

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

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

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