判断脚本，图片，CSS，iframe等是否加载完成
1.圖片
<img id="MyImg" src="src"/>
jquery實現：
$("#MyImg").load(function(){
})
說明：在jquery中load方法是在對象加載完畢后觸發
javascript實現：
JS判斷img圖片是否加載完成：使用onload或者onreadystatechange
function? ?isImgLoad(){
??? if(!!window.ActiveXObject){? // IE
??????? if(img.readyState == 'complete'){
??????????? alert('finished');
??????? }
??????? else{
??????????? alert('loading');
??????? }
??? }
??? else{
??????? // 非IE
??????? if(img.complete == true){
??????????? alert('finished');
??????? }
??????? else{
??????????? alert('loading');
??????? }
??? }
}???
2.動態加載js,css文件
?
?function loadjscssfile(filename,filetype){
??? if(filetype == "js"){ ???????
?????? var fileref = document.createElement('script'); ???????
???????fileref.setAttribute("type","text/javascript"); ??????
? fileref.setAttribute("src",filename); ???
}else if(filetype == "css"){?????????
? var fileref = document.createElement('link'); ???????
fileref.setAttribute("rel","stylesheet"); ??????
? fileref.setAttribute("type","text/css"); ??????
? fileref.setAttribute("href",filename); ???
} ??
if(typeof fileref != "undefined"){ ???????
document.getElementsByTagName("head")[0].appendChild(fileref); ??
? } ?
?? }
loadjscssfile("do.js","js");
loadjscssfile("test.css","css");
3.判斷iframe是否加載完成
var iframe = document.createElement("iframe");
iframe.src = "http://www.jb51.net";
if (!/*@cc_on!@*/0) { //if not IE
iframe.onload = function(){
alert("Local iframe is now loaded.");
};
} else {
iframe.onreadystatechange = function(){
if (iframe.readyState == "complete"){
alert("Local iframe is now loaded.");
}
};
}
document.body.appendChild(iframe);
或者：
var iframe = document.createElement("iframe");
iframe.src = "http://www.jb51.net";
if (iframe.attachEvent){
iframe.attachEvent("onload", function(){
alert("Local iframe is now loaded.");
});
} else {
iframe.onload = function(){
alert("Local iframe is now loaded.");
};
}
document.body.appendChild(iframe);
?
?
?
?
?
轉載于:https://www.cnblogs.com/peng14/p/3346144.html
總結
以上是生活随笔為你收集整理的判断脚本，图片，CSS，iframe等是否加载完成的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Javascript模式阅读笔记 · 简
- 下一篇： 你应该了解的CSS语义化命名方式及常用命