延迟加载外部js

在我们平时开发中，经常遇到加载js.对静态页面还好，因为执行顺序一般是

1、解析HTML结构

2、加载外部脚本和样式表文件

3、.解析并执行脚本代码

4、构造HTML DOM模型

5、加载图片等外部文件

6、页面加载完毕

但是我们做web开发通常是动态页面，有一些是通过js来动态执行添加页面元素。这时候要是遇到外部js 需要获取你动态添加的dom 比如：

$("img[modal='zoomImg']").each(function() {

$(this).on("click", function () {}

}

扫描二维码关注公众号，回复： 847030 查看本文章

我的<imgmodal="zoomImg"src="/images/credit/14501/201804/2018-04-09-18-31-11-28200.jpg"style="height: 100%;width: auto;">是通过

$(function(){           

for (var i = 0; i <imgPaths.length; i++) {

               $("#descImgDiv").append("<div style=\"height:100px;display: inline-block;vertical-align: text-bottom\"  >\n" +

                    "<img   modal='zoomImg'  src=\""+ imgPaths[i] +"\" style=\"height: 100%;width: auto;\">\n" +

                    "</div>");

           }

    })

加载的。这时候引入的外部js 就获取不到img

解决方案：

 <script type="text/javascript">
    function loadjsAfterOnload() {
        var element = document.createElement("script"); 
        element.src = "./js/util/boxImg.js";
        document.body.appendChild(element);
    }
    if (window.addEventListener){//Mozilla 支持的 添加loadjsAfterOnload 监听事件 执行loadjsAfterOnload 方法
        window.addEventListener("load", loadjsAfterOnload,false);
    }
    else if (window.attachEvent){//对IE浏览器支持的
        window.attachEvent("onload", loadjsAfterOnload);
    }
    else{//其他浏览器
        window.onload = loadjsAfterOnload;
    }
</script>

这个需要放到页面底端。从而实现外部js延迟加载。