在很多情况下,我们需要使用JQuery库里的$.getScript()
方法,载入js后执行指定js方法
有时候是不需要直接用<script src="/js/xxxx.js"></script>
全部引入js的
这样会影响页面的加载速度(因为页面加载完成后有些功能是不需要立刻执行的,而是用户点击、滚动、等其它行为时再加载相应的js文件),间接的实现js懒加载
如果只是仅仅使用这个方法的话,则需要引入JQuery库(未压缩:250kb、压缩:90kb)
这没必要引入JQuery来使用$.getScript()方法,这个完全是可以使用原生js实现的,$.getScript()这个方法是简写的 Ajax 函数
1 2 3 4 5
| $.ajax({ url: url, dataType: "script", success: success });
|
废话不多说直接上代码
使用动态创建script标签的办法来实现动态加载(也可以使用ajax请求(原生))
优点:可跨域
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
|
function getScript(url, callback) { var script = document.createElement('script'); script.type = "text/javascript"; if (typeof (callback) != "undefined") { if (script.readyState) { console.log(script.onreadystatechange); script.onreadystatechange = function () { if (script.readyState == "loaded" || script.readyState == "complete") { script.onreadystatechange = null; callback(); } } } else { script.onload = function () { callback(); } } } script.src = url; document.body.appendChild(script); }
|