Home / Blog / it

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

Author: Vic.Wang 2016/07/19 Tags:资源加载图片加载预加载图片预加载js加载css加载文件加载onload

落雨妹子问:“要加载远程的一个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 加载完成');
            }
        }
                    

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