Banyak orang mungkin mengalami masalah memuat file JS lainnya di JavaScript, tetapi banyak teman mungkin tidak tahu bagaimana menilai apakah file JS yang ingin kami muat telah dimuat. Jika kami tidak menyelesaikan beban, kami tidak akan berhasil. Artikel ini menjelaskan cara memuat file JS lainnya di JS dan menjalankan fungsi panggilan balik setelah memuat.
Kita dapat membuat elemen <script> secara dinamis dan kemudian memuat skrip dengan mengubah atribut SRC -nya, tetapi bagaimana kita tahu bahwa file skrip telah dimuat? Karena beberapa fungsi kami perlu dieksekusi setelah skrip dimuat dan berlaku.
Setelah mencari sumber daya di jaringan, saya menemukan bahwa di browser IE, Anda dapat menggunakan OnReadyStateChange dari elemen <script> untuk memantau perubahan dalam status pemuatan, dan menentukan apakah skrip dimuat atau diselesaikan dengan menilai apakah ReadyState dimuat atau diselesaikan. Alih -alih browser IE, Anda dapat menggunakan Onload untuk secara langsung menentukan apakah skrip dimuat.
Proses implementasi sederhana terlihat seperti ini:
// yaitu di bawah: var skrip = document.createElement ("script"); script.setAttribute ("type", "text/javascript"); script.onReadyStateChange = function () {if (this.readystate == "dimuat" || this.readystate == "complet }} script.setAttribute ("src", skrip [i]); // opera, ff, chrome, dll.: var skrip = document.createElement ("script"); script.setAttribute ("type", "Text/JavaScript"); script.onload function () {waspada ("dimuat secara sukses!"Prinsipnya sangat sederhana. Berdasarkan dua prinsip sederhana ini, kami membuat beberapa modifikasi, dan saya mengubahnya menjadi dua fungsi, yaitu pemuatan serial dan skrip pemuatan paralel.
Saat melewati array yang berisi beberapa jalur file JS, fungsi pemuatan serial dimulai dari pemuatan file skrip pertama. Setiap kali satu dimuat dengan sukses, file skrip berikutnya akan dimuat. Setelah semua pemuatan selesai, fungsi callback akan dieksekusi. Pemuatan paralel adalah memuat semua file skrip dari awal, yaitu, mereka mulai dari titik yang sama, dan ketika semua pemuatan selesai, fungsi callback dijalankan.
Setelah pengujian, kedua fungsi ini kompatibel dengan semua browser arus utama saat ini.
/*** Memuat pemuatan skrip yang ditentukan* contatenate memuat [asynchronous] memuat satu per satu, setiap pemuatan selesai, yang berikutnya dimuat* setelah semua pemuatan selesai, callback dieksekusi* @param array | String skrip yang ditentukan* Fungsi Fungsi Back Back after Succemes* @return Array All Gener ARRAY Gener if (typeof (skrip)! = "objek") var skrip = [skrip]; var head = document.getElementsbyTagname ("head"). Item (0) || Document.DocumentElement; var s = array baru (), last = scripts.length - 1, recursiveload = function (i) {// rekursives s [i] = document.createelement ("script"); s [i] .setAttribute ("type", "Text/JavaScript"); s [i] .onload = s [i] .onreadystatechange = function () {// lampirkan penangan untuk semua browser if (!/*@cc_on!@*/0 || this.readystate == "dimuat" || this.readyState == "complete") {this.onload = ceadeadystat = neadystate == "complete") {this.onload = ceadeadystat = neadyState == "complete") {this.onload = ceadeadystat = noadState == "complete") {this.onload = ceadeadystat = noadstate == "complete") {this.onload = ceadeadystate = nol = null; nol; nol; nol; this.parentnode.removechild (ini); if (i! = terakhir) rekursiveload (i + 1); lain jika (typeOf (callback) == "function") callback (); }} s [i] .setAttribute ("src", skrip [i]); Head.AppendChild (S [i]); }; Recursiveload (0);} /*** Muat skrip yang ditentukan secara paralel* memuat secara paralel [sinkron] pada saat yang sama, terlepas dari apakah beban sebelumnya diselesaikan atau tidak, muat semua secara langsung* jalankan callback setelah semua pemuatan* @param array | String array yang ditentukan* Fungsi Fungsi Fungsi* @param Fungsi setelah keberhasilan* @param Array | ParallelloadScripts (skrip, callback) {if (typeof (skrip)! = "objek") var skrip = [skrip]; var head = document.getElementsbyTagname ("head"). Item (0) || document.documentElement, s = array baru (), dimuat = 0; untuk (var i = 0; i <scripts.length; i ++) {s [i] = document.createelement ("script"); s [i] .setAttribute ("type", "Text/JavaScript"); s [i] .onload = s [i] .onreadystatechange = function () {// Lampirkan penangan untuk semua browser jika (!/*@cc_on!@*/0 || this.readystate == "dimuat" || this.readystate == "complete") {loaded ++; this.onreadystatechange = null; this.parentnode.removechild (ini); if (dimuat == scripts.length && typeof (callback) == "function") callback (); }}; s [i] .setAttribute ("src", skrip [i]); Head.AppendChild (S [i]); }}Di sini, tag <script> secara dinamis dimasukkan ke dalam tag <head> di halaman, dan elemen tag akan secara otomatis dihapus setelah memuat.
Jika Anda berhati -hati, Anda juga akan menemukan bahwa metode yang disebut kompilasi bersyarat digunakan di sini sebagai ekspresi (!/*@Cc_on!@*/0) untuk menentukan apakah itu bukan browser IE. Kompilasi bersyarat bukanlah fokus artikel ini. Jika Anda tertarik, Anda dapat mencari materi yang relevan untuk belajar.
Cara Menggunakan Dua Fungsi Ini: Di sini kami mendeklarasikan variabel array yang berisi dua alamat file JS jarak jauh (tentu saja, skrip panggilan tag <script> mendukung domain lintas):
Var Scripts = ["http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js", "http://wellstyled.com/files/jquery.debug/jquery.deBug.js. dan plugin debug jQuery // Kemudian Anda dapat menggunakan metode berikut untuk menelepon dan menjalankan panggilan balik setelah sukses. SeriLoadScripts (skrip, function () { / * debug = baru $ .debug ({posto: {x: 'kanan', y: 'bottom'}, lebar: '480px', ketinggian: '50%', itemDivider:' <hr> ', listdom:' all '}); * / flow (' script loading: '); listdom:' all '}); * / flow (' script loading: '<hr>', listdom: 'all'}); * / fl ALLOW ('Script:' <hr> '); listdom:' all '}); * / fl ALLICE (' Script loading: '); loor); load;); load;); load;); load;); load;'); all; all ';Fungsi yang dimuat dalam seri digunakan di sini. Tentu saja, Anda juga dapat menggunakan fungsi pemuatan paralel. Ini dapat digunakan sesuai dengan situasinya. Disarankan bahwa setiap skrip berikutnya memiliki ketergantungan pada skrip sebelumnya untuk menggunakan pemuatan serial, jika tidak menggunakan koneksi paralel, karena pada prinsipnya, koneksi paralel lebih cepat daripada koneksi serial.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.