Rumah > Artikel > hujung hadapan web > pace.js halaman memuatkan kemahiran plug-in_javascript bar kemajuan

pace.js halaman memuatkan kemahiran plug-in_javascript bar kemajuan

WBOYasal: 2016-05-16 15:37:381302semak imbas

Artikel ini memperkenalkan secara ringkas pemalam pace.js.

Perkenalkan Pace.js ke dalam halaman, dan halaman akan memantau permintaan anda secara automatik (termasuk permintaan Ajax Apabila gelung acara ketinggalan, status pemuatan dan kemajuan akan direkodkan pada halaman). Pemalam ini mempunyai keserasian yang baik dan serasi dengan semua pemalam arus perdana di atas IE8 Lebih-lebih lagi, kuasanya ialah anda juga boleh memperkenalkan gaya tema bar kemajuan pemuatan Anda boleh memilih sebarang warna dan pelbagai kesan animasi (seperti sebagai kesederhanaan, kilat , MAC OSX, padding kiri, padding atas, kaunter dan lantunan, dsb. kesan animasi), jika anda mahir dalam mengubah suai animasi CSS, maka anda boleh membuat kemungkinan tanpa had animasi untuk menambah ciri yang diperibadikan pada tapak web anda!

Kaedah panggilan:

Perkenalkan Pace.js dan fail tema:

<head>
 <script src="/pace/pace.js"></script>
 <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />
</head>

Konfigurasi tersuai:

Pace.js akan dimuatkan secara automatik ke dalam halaman Ia tidak perlu disambungkan ke sebarang kod dan akan mengesan kemajuan secara automatik. Jika anda ingin membuat beberapa pelarasan, anda boleh menetapkan window.paceOptions untuk menyesuaikan konfigurasi:

paceOptions = {
 // Disable the 'elements' source
 elements: false,
 // Only show the progress on regular and ajax-y page navigation,
 // not every request
 restartOnRequestAfter: false
}

Anda juga boleh meletakkan tetapan tersuai dalam teg skrip, contohnya:

<script data-pace-options='{ "ajax": false }' src='pace.js'></script>

Jika anda menggunakan AMD atau Browserify untuk memuatkan modul, anda boleh menetapkannya seperti ini (contohnya: mula):

define(['pace'], function(pace){
 pace.start({
  document: false
 });
});

Gunakan API:

Senarai API awam Pace.js:

Pace.start: Mula memaparkan bar kemajuan Jika anda tidak menggunakan AMD atau Browserify untuk memuatkan modul, ini akan dilaksanakan secara lalai.

Pace.restart: Bar kemajuan dimuatkan semula dan dipaparkan.

Pace.stop: Sembunyikan bar kemajuan dan berhenti memuatkan.

Pace.track: Pantau satu atau lebih tugas permintaan.

Pace.ignore: Abaikan satu atau lebih tugas permintaan.

Pada asasnya, ini adalah kaedah penggunaan umum, dan terdapat kaedah lain Sila pergi ke laman web rasmi untuk melihat pengenalan yang lebih terperinci. Saya harap pemalam ini dapat membantu semua orang!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Halaman web menghantar nilai dari butang radio halaman pop timbul kepada kemahiran perkongsian kod_javascript halaman indukArtikel seterusnya：Halaman web menghantar nilai dari butang radio halaman pop timbul kepada kemahiran perkongsian kod_javascript halaman induk

Artikel berkaitan

Lihat lagi