一、loading——(用来加载位于网页中的文件,而非本地的)
例子:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="div1">loading...... <span id="span1">0%</span></div>
</body> <script type="text/javascript">
var arr=["http://h.hiphotos.baidu.com/image/pic/item/00e93901213fb80e6c1c307635d12f2eb8389445.jpg","http://e.hiphotos.baidu.com/image/pic/item/5882b2b7d0a20cf4d51141c275094b36acaf992e.jpg","http://f.hiphotos.baidu.com/image/pic/item/d62a6059252dd42aedabbeb6003b5bb5c9eab809.jpg"]; var div1=document.getElementById("div1");
var span1=document.getElementById("span1"); var imgs=[];
var index=0; for (var i=0; i<arr.length; i++){ var imgObj=new Image();
imgObj.src=arr[i]; imgObj.onload=function (){ index++;
span1.innerHTML=parseInt(index/arr.length*100)+"%";
imgs.push(this); if (index==arr.length){
//全部加载完毕
div1.innerHTML=""; for (var j=0; j<arr.length; j++){ div1.appendChild(imgs[j]);
}
}
}
}
</script>
</html>
- DOMContentLoaded:相当于onload
二、read——window.onload 比 HTML 部分加载速度快
- window.onload:html,css,image,js,音频,flash
- read:DOM,css
三、事件委托
- e.target:触发的对象,上图为对象 ul1
- e.target.tagname:获取事件源,触发的对象标签名,上图为ul1对应的标签
- 兼容:
- e.target:用于高级浏览器
- e.srcElement:用于低级浏览器
四、传参
- 方法一(最原始)
- 方法二
- 方法三
- 方法四(最高端实用)