Introduction:

Recently, I often encounter some people asking about the need for on-demand loading in web pages. For example, js files are not loaded when the web page is loaded. Only when the user triggers an event, the js files required are loaded as needed. , and for example, users can switch the color of web pages at will. Looking at these requirements analysis, it is nothing more than a dynamic loading in js, so it is necessary to make several demos for your reference.

1. Execute a function after dynamically loading the js file in the web page:

Elements in the web page:

[html]

js code:

照格式創(chuàng)建：<script src="../js/myJs.js" type="text/javascript"></script>
[html]  
document.getElementById("btn1").onclick = function () {  
                var url = "js/myjs.js";  
  
                if (!checkIsExist(url)) {  
                    var script = document.createElement("script");  
                    script.type = "text/javascript";  
                    script.src = "../" + url;  
                    document.body.appendChild(script);  
                }  
  
                setTimeout("sayHi()", 100); //加載完成后，執(zhí)行其內(nèi)部的函數(shù)  
            }  
  
//檢查頁面中是否存在重名的js文件  
function checkIsExist(url) {  
            var scripts = document.getElementsByTagName("script");  
            //遍歷查詢頁面中已存在有想要加載的js文件  
            for (var i = 0; i < scripts.length; i++) {  
                if (scripts[i].src.indexOf(url)>-1) {  
                    return true;  
                }  
            }  
            return false;  
        }

js file is dynamically loaded and run!

2. Dynamically load css files to implement skin change

Page style

[html]

#ulList li{ list-style-type: none; height:50px; width:50px; background-color: Green; margin-right:5px; float:left;}

The three css files are: red.cssyellow.cssblue.css, which are saved in the css folder. Their content is background-color: corresponding to the color of the file name.

Page layout

[html]  
<ul id="ulList">  
   <li></li>  
   <li></li>  
   <li></li>  
</ul>  
頁面js www.2cto.com
[html]  
<script src="../js/jquery-1.8.3.min.js" type="text/javascript"></script>  
    <script src="../js/cookies.jquery.js" type="text/javascript"></script>  
    <script type="text/javascript">  
        var arrCss = [{ "color": "red" }, { "color": "yellow" }, { "color": "blue" } ]  
        $(function () {  
            //從cookie中讀取有沒有css的鏈接地址  
            var cssHrefCookie = $.cookie("cssName");  
            if (cssHrefCookie) {  
                loadCss(cssHrefCookie);  
            }  
  
            $("#ulList > li").map(function (index, item) {  
                $(item).css("background-color", arrCss[index].color).click(function () {  
                    //1.先移除頁面中包括在arrCss數(shù)組中的顏色link  
                    $("link").map(function (index, item) {  
                        //頁面中css鏈接的地址  
                        var href = $(item).attr("href");  
  
                        //遍歷arrCss數(shù)組對其值與頁面獲得的值進行比對  
                        $.map(arrCss, function (value, key) {  
                            //根據(jù)數(shù)組獲得的css鏈接的地址  
                            var cssHref = "css/" + arrCss[key].color + ".css";  
                            if (cssHref == href) {  
                                //1.移除該link標簽  
                                $(item).remove();  
                            }  
                        });  
                    });  
  
                    //動態(tài)加載css文件到頁面中  
                    var url = "css/" + arrCss[index].color + ".css";  
                    loadCss(url);  
  
                    //保存當前用戶的css地址到cookie中  
                    $.cookie("cssName", url, { expires: 1 });  
                });  
            });  
        });  
  
        //動態(tài)加載css文件的函數(shù)  
        function loadCss(url) {  
            //<link href="http://www.php1.cn/">
            var link = document.createElement("link");  
            link.rel = "stylesheet";  
            link.type = "text/css";  
            link.href = url;  
            document.getElementsByTagName("head")[0].appendChild(link);  
        }  
    </script>