JavaScript Learning 10: Dynamically loading scripts and styles

when we write a Web page, we need to introduce a lot of JavaScript script files and CSS style files, especially when the site is in great demand, the demand for the script also becomes larger, so that the performance of the site will be greatly compromised, so there is the concept of dynamic loading, To load the corresponding script and style when needed. Let's take a look at how to implement dynamic loading. dynamic scripting : Let's take a look at a code example that dynamically loads a JS file:

dynamically loading Jsvar flag=false; if (flag) {loadscript (' browserdetect.js ');} function Loadscript (URL) {var script =document.createelement (' script '); script.type= ' Text/javascript '; script.src= Url;document.getelementsbytagname (' head ') [0].appendchild (script);}

In this way, we can control whether the JS script file is loaded into the current page simply by controlling the value of the flag. Let 's take a look at a dynamic example of JS:

dynamically executes Jsvar flag=true; if (flag) {Executescript ();} function Executescript () {var script =document.createelement (' script '); script.type= ' Text/javascript '; var text= document.createTextNode ("alert (' Lian ')"), Script.appendchild (text);d ocument.getelementsbytagname (' head ') [0]. AppendChild (script);}

Dynamic styles We're all pretty familiar with all kinds of skin-changing features, but you certainly haven't thought about how the skin changes. I also learned this piece to realize that the original looks quite advanced skin-changing function is so simple: just change a CSS style. Let's take a look at how the style of the Web page is loaded dynamically. There are usually two ways to load a style sheet, one is a <link> tag and one is a <style> tag. So there are two ways to code examples that show how to load styles dynamically. use the link tag to load, and the above mentioned dynamic loading JS script is no different, no longer say.

<span style= "FONT-SIZE:18PX;" >//Dynamic Execution Linkvar flag=true;if (flag) {Loadstyle (' basic.css ');} function Loadstyle (URL) {var link=document.createelement (' link '); link.rel= ' stylesheet '; link.type = ' text/css '; Link.href=url;document.getelementsbytagname (' head ') [0].appendchild (link);} </span>

The trouble is to use a style to change the style, because it involves compatibility issues, so at the time of execution, you need to choose the appropriate function according to the type supported by the browser to perform this procedure, see the code example

<span style= "FONT-SIZE:18PX;" >//Dynamic Execution Stylevar flag=true;if (flag) {var style=document.createelement (' style '); style.type= ' text/css '; document.getElementsByTagName (' head ') [0].appendchild (style); Insertrule (Document.stylesheets[0], ' #box ', ' Background:red ', 0);} function Insertrule (sheet,selectortext,csstext,position) {//If non-Ieif (sheet.insertrule) {Sheet.insertrule ( selectortext+ "{" +csstext+ "}", position);} else if (sheet.addrule) {///if it is iesheet.addrule (selectortext,csstext,position);}} </span>

Summary : Remember the teacher has repeatedly stressed, if not necessary, do not add entities. Also in the process of program design, we start, load a lot of things, it is bound to affect the performance of the program, so we have to learn in need, 1.1 points of the bright, a little decorative mode, but also a manifestation of flexibility, although it is a small knowledge point, but the use of good, is of great use.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

JavaScript Learning 10: Dynamically loading scripts and styles