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

Demo下载：JS判断资源是否加载完成DEMO.zip

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

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

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