Rumah hujung hadapan web tutorial js js加载之使用DOM方法动态加载Javascript文件_javascript技巧

js加载之使用DOM方法动态加载Javascript文件_javascript技巧

May 16, 2016 pm 05:16 PM
pemuatan dinamik

传统上,加载Javascript文件都是使用<script>标签。 <BR>就像下面这样: <BR><script type="text/javascript" src="example.js"></script>
js加载之使用DOM方法动态加载Javascript文件_javascript技巧 
<script>标签很方便,只要加入网页,浏览器就会读取并运行。但是,它存在一些严重的缺陷。 <BR>  (1)严格的读取顺序。由于浏览器按照<script>在网页中出现的顺序,读取Javascript文件,然后立即运行,导致在多个文件互相依赖的情况下,依赖性最小的文件必须放在最前面,依赖性最大的文件必须放在最后面,否则代码会报错。 <BR>  (2)性能问题。浏览器采用"同步模式"加载<script>标签,也就是说,页面会"堵塞"(blocking),等待javascript文件加载完成,然后再运行后面的HTML代码。当存在多个<script>标签时,浏览器无法同时读取,必须读取完一个再去读取另一个,造成读取时间大大延长,页面响应缓慢。 <BR>为了解决这些问题,可以使用DOM方法,动态加载Javascript文件。 <BR><div class="codetitle"><span><a style="max-width:90%" data="78858" class="copybut" id="copybut78858" onclick="doCopy('code78858')"><U>复制代码 代码如下:<div class="codebody" id="code78858"> <BR>  function loadScript(url){ <BR>    var script = document.createElement("script"); <BR>    script.type = "text/javascript"; <BR>    script.src = url; <BR>    document.body.appendChild(script); <BR>  } <BR> <BR>这样做的原理是,浏览器即时创造出一个<script>标签,然后"异步"读取Javascript文件。这样不会造成页面堵塞,但会造成另外一个问题:这样加载的Javascript文件,不在原始的DOM结构之中,因此在DOM-ready(DOMContentLoaded)事件和window.onload事件中指定的回调函数对它无效。 </script>

Kenyataan Laman Web ini
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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Python melaksanakan pemuatan halaman dinamik dan analisis fungsi pemprosesan permintaan tak segerak untuk aplikasi koleksi pelayar tanpa kepala Python melaksanakan pemuatan halaman dinamik dan analisis fungsi pemprosesan permintaan tak segerak untuk aplikasi koleksi pelayar tanpa kepala Aug 08, 2023 am 10:16 AM

Python melaksanakan pemuatan dinamik dan fungsi pemprosesan permintaan tak segerak bagi aplikasi koleksi penyemak imbas tanpa kepala Dalam perangkak web, kadangkala perlu untuk mengumpul kandungan halaman yang menggunakan pemuatan dinamik atau permintaan tak segerak. Alat perangkak tradisional mempunyai had tertentu dalam memproses halaman sedemikian dan tidak boleh mendapatkan kandungan yang dijana oleh JavaScript pada halaman dengan tepat. Menggunakan pelayar tanpa kepala boleh menyelesaikan masalah ini. Artikel ini akan memperkenalkan cara menggunakan Python untuk melaksanakan pelayar tanpa kepala untuk mengumpul kandungan halaman menggunakan pemuatan dinamik dan permintaan tak segerak.

Cara mengendalikan pemuatan dinamik dan penukaran komponen dalam Vue Cara mengendalikan pemuatan dinamik dan penukaran komponen dalam Vue Oct 15, 2023 pm 04:34 PM

Mengendalikan pemuatan dinamik dan penukaran komponen dalam Vue Vue ialah rangka kerja JavaScript popular yang menyediakan pelbagai fungsi fleksibel untuk mengendalikan pemuatan dinamik dan penukaran komponen. Dalam artikel ini, kami akan membincangkan beberapa kaedah mengendalikan pemuatan dinamik dan penukaran komponen dalam Vue, dan memberikan contoh kod khusus. Memuatkan komponen secara dinamik bermakna memuatkan komponen secara dinamik pada masa jalan seperti yang diperlukan. Ini meningkatkan prestasi dan kelajuan pemuatan aplikasi anda kerana komponen yang berkaitan dimuatkan hanya apabila diperlukan. Vue menyediakan async dan awa

Mendedahkan prinsip kemas kini hangat di Golang: penjelasan orang dalam tentang pemuatan dinamik dan pemuatan semula Mendedahkan prinsip kemas kini hangat di Golang: penjelasan orang dalam tentang pemuatan dinamik dan pemuatan semula Jan 20, 2024 am 10:09 AM

Meneroka Prinsip Kemas Kini Panas Golang: Misteri Pemuatan Dinamik dan Muat Semula Pengenalan: Dalam bidang pembangunan perisian, pengaturcara sering berharap dapat mengubah suai dan mengemas kini kod tanpa memulakan semula aplikasi. Keperluan sedemikian sangat penting kepada kecekapan pembangunan dan kebolehpercayaan operasi sistem. Sebagai bahasa pengaturcaraan moden, Golang menyediakan pembangun dengan banyak mekanisme mudah untuk melaksanakan kemas kini hangat. Artikel ini akan menyelidiki prinsip kemas kini panas Golang, terutamanya misteri pemuatan dan pemuatan semula dinamik, dan akan menggabungkannya dengan contoh kod khusus.

Cara membuat jadual yang memuatkan data secara dinamik menggunakan Vue dan Element-UI Cara membuat jadual yang memuatkan data secara dinamik menggunakan Vue dan Element-UI Jul 21, 2023 pm 11:49 PM

Cara menggunakan Vue dan Element-UI untuk mencipta jadual yang memuatkan data secara dinamik Dalam pembangunan web moden, jadual data ialah salah satu komponen antara muka biasa. Vue.js ialah rangka kerja bahagian hadapan yang sangat popular pada masa kini, dan Element-UI ialah satu set perpustakaan komponen yang dibangunkan berdasarkan Vue.js, yang menyediakan set komponen UI yang kaya untuk kami gunakan. Artikel ini akan memperkenalkan cara menggunakan Vue dan Element-UI untuk mencipta jadual yang boleh memuatkan data secara dinamik dan memberikan contoh kod yang sepadan. Pertama, kita perlu memasang

Selesaikan ralat Vue: Tidak dapat menggunakan Penghala Vue dengan betul untuk memuatkan komponen secara dinamik berdasarkan parameter penghalaan Selesaikan ralat Vue: Tidak dapat menggunakan Penghala Vue dengan betul untuk memuatkan komponen secara dinamik berdasarkan parameter penghalaan Aug 20, 2023 am 08:09 AM

Selesaikan ralat Vue: Tidak dapat menggunakan VueRouter dengan betul untuk memuatkan komponen secara dinamik berdasarkan parameter penghalaan Dalam proses menggunakan VueRouter untuk lompatan penghalaan, kadangkala kita perlu memuatkan komponen secara dinamik berdasarkan parameter penghalaan. Walau bagaimanapun, dalam beberapa kes, kami mungkin menghadapi ralat biasa: tidak dapat menggunakan VueRouter dengan betul untuk memuatkan komponen secara dinamik berdasarkan parameter penghalaan. Artikel ini akan menerangkan cara menyelesaikan ralat ini dan memberikan contoh kod. Pertama, kita perlu menjelaskannya: VueRouter boleh lulus

Cara menggunakan pantulan dan memuatkan himpunan secara dinamik dalam C# Cara menggunakan pantulan dan memuatkan himpunan secara dinamik dalam C# Oct 08, 2023 pm 12:12 PM

Cara menggunakan pantulan dan memuatkan himpunan secara dinamik dalam C# Pengenalan: Dalam C#, pantulan (Refleksi) ialah mekanisme berkuasa yang membolehkan kami memperoleh dan memanipulasi metadata atur cara semasa masa jalan, termasuk maklumat jenis, maklumat ahli, dsb. Himpunan memuatkan secara dinamik ialah aplikasi biasa yang dilaksanakan melalui refleksi, dan sangat berguna dalam beberapa senario tertentu. Artikel ini akan memperkenalkan secara terperinci cara menggunakan pantulan dan memuatkan himpunan secara dinamik dalam C#, dan memberikan contoh kod khusus. Konsep asas refleksi Refleksi adalah fungsi penting dalam bahasa C#

Petua praktikal phpSpider: Bagaimana untuk menangani pemuatan dinamik kandungan web? Petua praktikal phpSpider: Bagaimana untuk menangani pemuatan dinamik kandungan web? Jul 22, 2023 am 08:33 AM

Petua praktikal phpSpider: Bagaimana untuk menangani pemuatan dinamik kandungan web? Apabila merangkak data halaman web, kami sering menghadapi masalah bahawa kandungan yang dimuatkan secara dinamik tidak boleh diperoleh secara langsung melalui perangkak. Kandungan yang dimuatkan secara dinamik ini boleh menjadi data yang diperoleh melalui permintaan AJAX, elemen DOM yang diberikan melalui JavaScript, dsb. Untuk menyelesaikan masalah ini, artikel ini akan memperkenalkan beberapa petua praktikal untuk menangani masalah pemuatan dinamik halaman web apabila menggunakan phpSpider. 1. Gunakan alatan penyahpepijatan rangkaian untuk mencari URL yang dimuatkan secara dinamik

Gunakan kaedah load() kelas Sistem di Java untuk memuatkan kelas atau sumber secara dinamik Gunakan kaedah load() kelas Sistem di Java untuk memuatkan kelas atau sumber secara dinamik Jul 25, 2023 am 10:25 AM

Java menggunakan kaedah load() kelas Sistem untuk memuatkan kelas atau sumber secara dinamik Dalam pembangunan Java, kadangkala kita perlu memuatkan kelas atau sumber secara dinamik semasa program berjalan untuk mencapai beberapa fungsi yang fleksibel. Java menyediakan kaedah load() kelas Sistem untuk mencapai keperluan ini. Artikel ini akan memperkenalkan penggunaan kaedah load() kelas Sistem dan memberikan contoh kod yang sepadan. Mula-mula, mari kita fahami definisi kaedah load(): publicstaticvo

See all articles