jQuery实现动态加载(按需加载)javascript文件的方法分析


Posted in jQuery onMay 31, 2019

本文实例讲述了jQuery实现动态加载(按需加载)javascript文件的方法。分享给大家供大家参考,具体如下:

为了提高网页程序的性能,在很多情况下javascript 是按需加载,而不是全部写在 <head>里面。利用jQuery可以很方便的实现按需加载js.

$("#load").click(function(){
  $.getScript('helloworld.js', function() {
     $("#content").html('js 加载成功!');
  });
});

当id为“load" 的按钮被点击之后,将会动态加载 helloword.js , 然后就可以执行里面的方法。

<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
 <h1>利用 jQuery 动态加载 js</h1>
<div id="content"></div>
<br/>
<button id="load">Load JavaScript</button>
<button id="sayHello">Say Hello</button>
<script type="text/javascript">
$("#load").click(function(){
 $.getScript('js-example/helloworld.js', function() {
   $("#content").html('
     Javascript is loaded successful! sayHello() function is loaded!
   ');
 });
});
$("#sayHello").click(function(){
 sayHello();
});
</script>
</body>
</html>

其中  helloworld.js 的代码如下:

function sayHello(){
  alert("Hello ~我是动态加载的!");
}

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 #jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 #jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 #jQuery
jquery操作select常见方法大全【7种情况】
May 28 #jQuery
jQuery实现高级检索功能
May 28 #jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 #jQuery
jquery实现动态创建form并提交的方法示例
May 27 #jQuery
You might like
PHP高级编程实例:编写守护进程
2014/09/02 PHP
PHP实现类似于C语言的文件读取及解析功能
2017/09/01 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
2018/10/15 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
2016/01/05 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
js中作用域的实例解析
2017/03/16 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
详解Django通用视图中的函数包装
2015/07/21 Python
Win10下Python环境搭建与配置教程
2016/11/18 Python
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
python操作oracle的完整教程分享
2018/01/30 Python
Python模块的加载讲解
2019/01/15 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
Python日志器使用方法及原理解析
2020/09/27 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
Java面试中常遇到的问题,也是需要注意的几点
2013/08/30 面试题
四年的个人工作自我评价
2013/12/10 职场文书
库房管理员岗位职责
2014/03/09 职场文书
厨师个人自我鉴定范文
2014/04/19 职场文书
个人师德师风自我剖析材料
2014/09/29 职场文书
先进单位事迹材料
2014/12/25 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js
Apache Hudi的多版本清理服务彻底讲解
2022/03/31 Servers
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript