前端JS判断远程文件是否加载
原创前端JS判断远程文件是否加载
原创
谭广健
修改于 2020-12-01 16:51:47
修改于 2020-12-01 16:51:47
代码可运行
运行总次数：0
代码可运行
每次在开发项目的时候为方便快捷开发，前端一般都直接使用CDN进行远程文件调用省却多级目录的问题。但这样一般都埋下了潜在的问题，就是怎么知道该远程文件是否已经加载的呢？
好吧，经过一系列骚操作，我们就来说一下办法。都是使用原生的JS进行调用判断，感兴趣的同学可以进行直接调用。
1、判断图片是否已经加载：
var img = new Image();
img.src = url; /*url为资源地址*/
img.onload = function() {
console.log('图片加载完成');
} 2、判断CSS是否加载：
function loadCSS(url) {
var _doc = document.getElementsByTagName('head')[0];
var css = document.createElement('link');
css.setAttribute('rel', 'stylesheet');
css.setAttribute('type', 'text/css');
css.setAttribute('href', url);
_doc.appendChild(css);
css.onload = function() {
console.log('CSS加载完成');
}
}
loadCSS('test.css');3、判断远端的JS文件是否已经加载：
function loadJS(url) {
var _doc = document.getElementsByTagName('head')[0];//获取head头部标签元素对象。
var js = document.createElement('script');//创建一个script标签元素。
js.setAttribute('type', 'text/javascript');//设置script标签的type属性。
js.setAttribute('src', url);//设置script标签的src属性值，加载js文件的路径。
_doc.appendChild(js);//将script标签附加到head标签中
js.onload = function() {//进行加载
console.log('JS加载完成');//加载完成内容
}
}
loadJS('test.js');最后送上一个低版本游览器的返回装态：
js.onreadystatechange = function () {
if (js.readystate == 'loaded' || js.readystate == 'complete') {
console.log('ie6、ie7 加载完成');
}
}原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
