js异步加载的四种解决方案

最新推荐文章于 2023-05-14 15:01:02 发布

艾小莫的梦

最新推荐文章于 2023-05-14 15:01:02 发布

阅读量1.9k

点赞数 2

分类专栏： JS情缘文章标签：异步 javascript defer async js异步加载

JS情缘专栏收录该内容

35 篇文章 0 订阅

订阅专栏

js异步加载的4种方式，点评开始。

方案1：$(document).ready

<!DOCTYPE html>
<html>
    <head>
        <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> 
        <script type="text/javascript">
            $(document).ready(function() {
              alert("加载完成！");
            });
        </script>
    </head>
    <body>
        <img   src="http://images.cnitblog.com/i/121863/201405/222202573569862.jpg" />
    </body>
</html>

点评：
1、需要引用jquery
2、兼容所有浏览器。

方案2：标签的async=”async”属性
async的定义和用法(是HTML5的属性)
async 属性规定一旦脚本可用，则会异步执行。

1、HTML5中新增的属性，Chrome、FF、IE9&IE9+均支持（IE6~8不支持）。此外，这种方法不能保证脚本按顺序执行。
2、async 属性仅适用于外部脚本（只有在使用 src 属性时）。

方案3：

<script type="text/javascript" defer="defer"> 
alert(document.getElementById("p1").firstChild.nodeValue); 
</script>

点评：兼容所有浏览器。此外，这种方法可以确保所有设置defer属性的脚本按顺序执行。

方案4：动态创建

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            (function(){
                var s = document.createElement('script');
                s.type = 'text/javascript';
                s.src = "http://code.jquery.com/jquery-1.7.2.min.js";
                var tmp = document.getElementsByTagName('script')[0];
                tmp.parentNode.insertBefore(s, tmp);
            })();
        </script>
    </head>
    <body>
        <img src="http://images.cnitblog.com/i/121863/201405/222202573569862.jpg" />
    </body>
</html>

点评：兼容所有浏览器。

艾小莫的梦

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js异步加载的四种解决方案

js异步加载的4种方式，点评开始。方案1：$(document).ready<!DOCTYPE html><html> <head> <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> <script type="text/jav
复制链接

扫一扫