JS判断远程资源加载是否完成

落雨妹子问：“要加载远程的一个 url 的资源，我该怎么判断它已经加载完毕？”

答：“资源是图片还是什么”

落雨：“图片”

答：“图片好办”

想起之前做过图片预加载相关的东东，图片不是有个 onload 方法么，这个就能判断图片是否加载完成了。

图片预加载简单Demo：

var img = new Image();
img.src = url; /*url为资源地址*/

img.onload = function() {
    console.log('图片加载完成');
}

落雨问：“那如果是 js 或 css 文件呢”

JS 和 CSS 貌似也可以动态创建引入吧，SeaJS 这些按需加载的类库就是这么实现的吧。

判断JS加载简单Demo：

function loadJS(url) {
    var _doc = document.getElementsByTagName('head')[0];
    var js = document.createElement('script');

    js.setAttribute('type', 'text/javascript');
    js.setAttribute('src', url);
    _doc.appendChild(js);

    js.onload = function() {
        console.log('JS加载完成');
    }
}

loadJS('test.js');

判断CSS加载简单Demo：

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');

如果需要兼容 IE6/7 等低版本的 IE，需要用另外的方法 onreadystatechange，跟踪状态的变化情况，如 loading、loaded、interactive、complete等，当返回状态为 loaded 或 complete 时，表示加载完成啦。

js.onreadystatechange = function () {
    if (js.readystate == 'loaded' || js.readystate == 'complete') {
        console.log('ie6、ie7 加载完成');
    }
}

浏览器版本判断等代码就省略了，自己查吧。