JS判断远程资源加载是否完成
Author: Vic.Wang 2016/07/19
落雨妹子问:“要加载远程的一个url的资源,我该怎么判断它已经加载完毕?”
答:“资源是图片还是什么”
落雨:“图片”
答:“图片好办”
想起之前做过图片预加载相关的东东,图片不是有个
图片预加载简单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,需要用另外的方法
js.onreadystatechange = function () { if (js.readystate == 'loaded' || js.readystate == 'complete') { console.log('ie6、ie7 加载完成'); } }
浏览器版本判断等代码就省略了,自己查吧。
本文地址:http://blog.mingsixue.com/it/JS-resource-load.html
文章若需转载,请附上原文链接,谢谢配合。^_^