风君子博客

  • 首页
  • 业界
  • 前端
  • 运维
  • 建站
  • 软件
  • 生活
  • 后端
  • 创投
  • 运营
  • 程序人生
    • 影视
    • 游戏
    • 句子
    • bootstrap4教程
    • 资源
    • 日期计算器
  • 其他
    • 说说
    • 关于本站
  1. 首页
  2. 前端
  3. 正文

JavaScript异步加载的4种方式

2018年8月28日 735点热度 0人点赞 0条评论

方案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:<script>标签的async="async"属性

async的定义和用法(是HTML5的属性)

async 属性规定一旦脚本可用,则会异步执行。

<script type="text/javascript" src="xxxxxxx.js" async="async"></script>

1、HTML5中新增的属性,Chrome、FF、IE9&IE9+均支持(IE6~8不支持)。此外,这种方法不能保证脚本按顺序执行。

2、async 属性仅适用于外部脚本(只有在使用 src 属性时)。

 

方案3:<script>标签的defer="defer"属性

defer 属性规定是否对脚本执行进行延迟,直到页面加载为止。

有的 javascript 脚本 document.write 方法来创建当前的文档内容,其他脚本就不一定是了。

如果您的脚本不会改变文档的内容,可将 defer 属性加入到 <script> 标签中,以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本,它将推迟对脚本的解释,直到文档已经显示给用户为止。

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

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

方案4:动态创建<script>标签

<!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>

 

兼容所有浏览器。

本帖转自:https://blog.csdn.net/u013063153/article/details/52457573

标签: javascript js
最后更新:2019年6月6日

风君子

独自遨游何稽首 揭天掀地慰生平

点赞
< 上一篇
下一篇 >

猜你喜欢

  • 詹姆斯・韦伯望远镜竟然运行 JavaScript 脚本,还是 2003 年的老版本

  • 华为鸿蒙继续开放:方舟JS运行时正式开源

  • 华为 HarmonyOS 开源鸿蒙方舟编译器前端工具“方舟 JS 运行时”正式开源

  • JetBrains 调查:JavaScript 最流行,Python 再次领先 Java

  • 禁止鼠标右键代码 禁止按键F5和禁止鼠标右键菜单 js代码

  • 不要盲目跟着JavaScript的趋势走

  • Node 之后又一大作,TypeScript 运行时 Deno 1.0 正式发布

  • 如何用不到 2KB 的 JavaScript 代码写一个 3D 赛车游戏?

  • 一个单行代码 npm 包使得 JavaScript 生态系统陷入混乱

  • JS基础测试: typeof delete window.name 的返回结果是什么?​

  • GitHub收购代码分发公司NPM,吸引Java开发者

  • JS实现汇率换算

文章评论

取消回复

风君子

独自遨游何稽首 揭天掀地慰生平

最新 热点 随机
最新 热点 随机
光峰科技2022半年报:核心器件业务和C端自有品牌业务增长强劲 小米 10 至尊纪念版、Redmi Note 9 等 8 款机型 10 月底停止 MIUI 开发版内测公测 长安深蓝及供应商响应限电号召暂时停产, 尽可能保障 SL03 月底交付 LG 在欧洲发布新款 Ultra PC 笔记本,搭载锐龙 5000U 处理器 詹姆斯・韦伯望远镜竟然运行 JavaScript 脚本,还是 2003 年的老版本 Shazam:一个苹果 iPhone 用户可能不会注意的功能,今天迎来了 20 周年纪念日 微星推出新款 ITX 主板,内置英特尔 i5-11260H 消息称曹操出行最快明年申请在港 IPO 上市,官方回应:不予置评 米哈游旗下《崩坏:星穹铁道》将亮相科隆游戏展 动画电影《小黄人大眼萌:神偷奶爸前传》今日内地上映,结局修改
工行孩子王baby年费可以免吗?得看你消费能力够不够信用卡透支额度是什么 要怎么计算工行星级评定标准 这些知识你必须掌握统信 UOS 宣布成为国内首个 50 万 + 操作系统生态适配组合索尼宣布《如龙》系列 8 款游戏将于今年年内加入 PS+ 会员游戏库建行龙卡喜马拉雅fm信用卡制卡要多久?阿里云盘 iOS 版 3.9.0 更新:新增共享相簿,新版传图识字,iPad 支持扫码登录联想晒拯救者 Y70 手机背面照:7.99mm 轻薄机身,CNC 金属中框罗技宣布与腾讯合作,年内推出云游戏掌机2018交通银行小白卡刷卡礼是什么?满额就送
申请撤销退市风险警示需要几天 华为Mate 40系列或采用双处理器方案:国行版仍为麒麟芯 在资源有限的星球上,77亿人口的文明何去何从? 月息2.5厘年利息多少 荣耀9青春版和荣耀畅玩7C哪个好? 荣耀畅玩7C和荣耀9青春版对比评测 董明珠:格力今年再招 3000-5000 名大学生毕业生、手机做的不比苹果差 头寸是什么意思 联想笔记本摄像头怎么打开?联想笔记本摄像头打开方法介绍 海关总署:2021 年我国集成电路进口额 27934.8 亿元,同比增长 15.4% SpaceX 猎鹰 9 号雾中发射 46 颗 Starlink 星链卫星打破年度发射纪录,马斯克发来贺电
标签聚合
美国 电动汽车 华为 贷款 投资理财 银行卡 马斯克 支付宝 股票 IT资讯 秘籍 科技 三星 额度 利息 苹果 iphone 借款人 手机 快科技 信用卡 特斯拉 小米 京东 腾讯 理财知识 微软 银行 汽车 芯片
注意事项 病虫 办法 品种 常见 水培 新买 家庭 处理 怎么 作文 什么时候 家里 回事 阳台 大全 原因 作用 什么 冬天 叶子发黄 防治 区别 适合 发黄 盆景 吊兰 虫害 有哪些 开花 栀子花 养花 植物 老舍 时间 君子兰 治方 图片 功效 绿萝 叶子 兰花 肥料 室内 怎么办 盆栽 烂根 方法 多久 花语
Tags
酒 胡萝卜 食物 私房菜 有什么好处 水果 能吃 鸡蛋 身体 会胖吗 副作用 吃什么 相克 好处 饮食 作用 土豆食谱 方法 牛肉 豆腐 糖 热量 茄子 好吃 营养 皮肤过敏 区别 菜谱 牛肉食谱 功效 怎么做 营养价值 豆腐食谱 维生素 土豆 热菜 食用方法 常吃 健康 排骨 汤类 高血压 牛奶 糖尿病人 做法 吃法 下饭菜 海鲜 一起吃 排骨食谱
最近评论
youyou 发布于 3 周前(07月30日) 站长,文章底部相关文章使用的是哪款插件,方便提供下吗,可发邮箱,谢谢!
youyou 发布于 3 周前(07月30日) 你好,咨询下你的文章后面的相关文章采用的是哪个插件,谢谢!
www 发布于 1 个月前(07月19日) 听!我知道你们不会相信这一点,但我得到了这个 Minecraft 升级代码并且它被赎回了!你也可以从...
鲜盖 发布于 2 个月前(06月24日) 感谢你的博客页!完美解决了困扰我的滚动条问题!
仍搜 发布于 2 个月前(06月07日) 你好换个友情链接吧
九九 发布于 4 个月前(05月06日) 也可能是 IP2LOCATION 数据
风君子 发布于 8 个月前(12月20日) 直播这么赚钱的吗?
wanif 发布于 8 个月前(12月18日) 采用你提供的pe制作u盘后无法识别mac硬盘,如何解决?
robotunl 发布于 8 个月前(12月18日) 可以用了,感谢
robotunl 发布于 8 个月前(12月17日) DISM++链接下不了了啊,能再发一个么。 还有怎么制作和博主一样的PE u盘。

COPYRIGHT © 2022 风君子博客 ALL RIGHTS RESERVED.

豫ICP备14018241号