主页 > 前端 > javascript >
来源:自学PHP网 时间:2023-04-20 17:35 作者: 阅读:次
[导读] 我们知道在 IE 系列浏览器中,我们可以通过 onreadystatechange 监听元素加载状态,然后通过 readyState 属性判断元素是否加载完成。Chrome、FireFox 等标准浏览器中,我们则可以通过 onload 监听...
例 代码如下 复制代码 /** * 判断元素是否加载成功 */ node.onload = node.onreadystatechange = function() { if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") { alert("加载成功!"); } }; 最后附上 代码如下 复制代码 <!DOCTYPE HTML> <html> <head> <meta charset="gbk"> <title>JS 异步加载</title> </head> <body> <input id="loadInput" type="text" placeholder="ENTER URL" /> <input id="loadBtn" type="submit" value="Load" /> <script type="text/javascript"> var head = document.getElementsByTagName("head")[0], loadBtn = document.getElementById("loadBtn"), loadInput = document.getElementById("loadInput"), load, loaded = []; load = function(url) { var f = true, n; if (/.js$/i.test(url)) { n = document.createElement("script"); n.setAttribute("type", "text/javascript"); n.setAttribute("src", url); n.setAttribute("async", true); } else if (/.css$/i.test(url)) { n = document.createElement("link"); n.setAttribute("type", "text/css"); n.setAttribute("rel", "stylesheet"); n.setAttribute("href", url); loaded[url] = true; } else { f = false; alert("请输入正确类型!"); } if (f) { /** * 判断元素是否加载成功 */ n.onload = n.onreadystatechange = function() { if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") { loaded[this.getAttribute("src")] = true; n.onload = n.onreadystatechange = null; } }; head.appendChild(n); } }; loadBtn.onclick = function() { var url = loadInput.value; if (loaded[url]) { alert("请勿重复加载!") } else { load(url); } }; </script> </body> </html> 一枚,供为参考。 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com