在我们平时开发中,经常遇到加载js.对静态页面还好,因为执行顺序一般是
1、解析HTML结构
2、加载外部脚本和样式表文件
3、.解析并执行脚本代码
4、构造HTML DOM模型
5、加载图片等外部文件
6、页面加载完毕
但是我们做web开发通常是动态页面,有一些是通过js来动态执行添加页面元素。这时候要是遇到外部js 需要获取你动态添加的dom 比如:
$("img[modal='zoomImg']").each(function() {
$(this).on("click", function () {}
}
我的<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延迟加载。