Bagaimana untuk membuat jquery dilaksanakan apabila membuka halaman

Apabila menggunakan jQuery untuk pembangunan web, kadangkala anda perlu melakukan operasi tertentu secara automatik selepas halaman dimuatkan, seperti menetapkan kesan paparan awal, memaparkan maklumat segera khas, dsb. Jadi bagaimana untuk melaksanakan fungsi ini? Artikel ini akan memperkenalkan cara membuat jQuery dilaksanakan apabila halaman dibuka.

1. Gunakan fungsi $(document).ready() jQuery

Menggunakan fungsi $(document).ready() jQuery ialah kaedah yang paling biasa digunakan dimuatkan, kod dalam fungsi panggil balik dilaksanakan. Contoh kod adalah seperti berikut:

$(document).ready(function() {
  //执行的代码
});

Seperti yang ditunjukkan dalam kod di atas, parameter yang diluluskan dalam fungsi $(document).ready() ialah fungsi, yang akan dilaksanakan selepas DOM dimuatkan . Dalam fungsi ini anda boleh menulis kod jQuery yang perlu dilaksanakan.

2. Gunakan fungsi window.onload() jQuery

fungsi window.onload() jQuery tidak akan dilaksanakan sehingga semua sumber pada halaman (termasuk imej, helaian gaya, dsb.) dimuatkan. Berbanding dengan fungsi $(document).ready(), fungsi window.onload() mengandungi kandungan yang lebih luas, jadi masa pelaksanaan akan menjadi lebih lama. Contoh kod adalah seperti berikut:

$(window).on('load', function() {
  //执行的代码
});

Berbeza daripada fungsi $(document).ready(), kod fungsi window.onload() tidak akan dilaksanakan sehingga semua sumber dimuatkan. Oleh itu, anda juga boleh menulis beberapa kod di sini yang perlu menunggu sumber dimuatkan sebelum ia boleh dilaksanakan.

3. Gunakan panggilan fungsi segera

Selain daripada dua kaedah di atas, anda juga boleh menggunakan kaedah panggilan fungsi segera untuk melaksanakan kod secara automatik selepas halaman dimuatkan. Memanggil fungsi dengan segera bermakna merangkum badan fungsi dalam kurungan, dan akhirnya menambah kurungan lain untuk melaksanakan fungsi itu. Contoh kod adalah seperti berikut:

(function() {
  //执行的代码
})();

Seperti yang ditunjukkan dalam kod di atas, $(function(){}) dalam kod ini bersamaan dengan $(document).ready(function(){}) . Apabila kandungan kod kecil, anda boleh menggunakan kaedah merangkumnya ke dalam fungsi tanpa nama untuk pelaksanaan.

4 Gunakan atribut tangguh

Apabila memperkenalkan sumber JavaScript luaran ke dalam halaman, anda boleh menggunakan atribut tangguh untuk memberitahu penyemak imbas untuk terus memaparkan halaman dan menunggu JavaScript dimuatkan sebelum melaksanakan. Contohnya, kod berikut:

<script src="xxxx.js" defer></script>

Dalam kod di atas, proses pemuatan, penghuraian dan pelaksanaan sumber luaran xxxx.js tidak akan menjejaskan pemaparan halaman. Apabila JavaScript dimuatkan, ia akan menunggu baris gilir penghuraian dilaksanakan sehingga pelaksanaan kod skrip selesai.

5 Gunakan atribut async

Tidak seperti atribut defer, atribut async menunjukkan bahawa skrip harus dimuat turun dan dilaksanakan dengan segera, tetapi semasa melaksanakan skrip, ia tidak akan berhenti menghuraikan dokumen. dan tidak akan menunggu untuk memuatkan dan melaksanakan skrip lain. Apabila kelajuan rangkaian perlahan dan skrip mengambil masa untuk memuat turun dan menghuraikan, ia mungkin menyebabkan skrip mula dilaksanakan sebelum beberapa elemen halaman selesai dimuatkan. Penggunaannya adalah seperti berikut:

<script src="xxxx.js" async></script>

Di atas adalah lima kaedah bagaimana untuk membuat jQuery dilaksanakan apabila membuka halaman, antaranya fungsi $(document).ready() dan fungsi panggilan segera ialah kaedah yang paling biasa digunakan. Dalam penggunaan sebenar, kaedah yang berbeza boleh dipilih mengikut keperluan.

Atas ialah kandungan terperinci Bagaimana untuk membuat jquery dilaksanakan apabila membuka halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!