网站地图    收藏   

主页 > 前端 > javascript >

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

添加评论