书中addLoadEvent对于在加载完HTML文档创建DOM树后绑定两个函数，只有最后一个起作用；改为直接用window.onload绑定两个函数无此问题，暂时没有弄清除原因，望知道的大神指点迷津，谢谢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>imgegallery</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{font-family: "微软雅黑","Arial",sans-serif;color: #222;background: #ccc;margin: 1em 10%; }
h1{color: #333;background: transparent;}
a{color: #333; background: transparent;font-weight: bold;text-decoration: none;}
ul{padding: 0; overflow: hidden;}
li{float: left;padding: 1em;list-style: none;}
img{clear: both;}
</style>
<script type="text/javascript">
function insertAfter(newElement,targetElement){
var parente = targetElement.parentNode;
if(parente.lastChild == targetElement){
parente.appendChild(newElement);
}else{
parente.insertBefore(newElement,targetElement.nextSibling);
}
}
function prepareNode(){
console.log("prepare Node????");
if(!document.createElement) return false;
if(!document.createTextNode) return false;
if(!document.getElementById) return false;
if(!document.getElementById("imagegallery")) return false;
var placeholder = document.createElement("img");
var descrpt = document.createElement("p");
var text11 = document.createTextNode("Choose an image");
var gallery = document.getElementById("imagegallery");
placeholder.setAttribute("id","myphoto");
placeholder.setAttribute("src", "imge/car.jpg");
placeholder.setAttribute("alt", "the first");
placeholder.setAttribute("width", "400px");
placeholder.setAttribute("height", "300px");
descrpt.setAttribute("id", "description");
descrpt.appendChild(text11);
/*document.getElementsByTagName("body")[0].appendChild(placeholder);
document.getElementsByTagName("body")[0].appendChild(descrpt); 这种方法插入的元素永远在body的最后面*/
insertAfter(placeholder,gallery);
insertAfter(descrpt,placeholder);
console.log("create element!!!");
}
function showPic(whichPic){
var source = whichPic.getAttribute("href");
var placeholder = document.getElementById("myphoto");
var text = whichPic.getAttribute("title") ? whichPic.getAttribute("title"): "";
var description = document.getElementById("description");
if(!document.getElementById("myphoto")){
return true;
}
placeholder.setAttribute("src",source);
if(!document.getElementById("description")){
return false;
}
description.firstChild.nodeValue = text;
return false;
}
function prepareShow(){
console.log("enter prepare show!!!");
if(!document.getElementsByName){
return false;
}
if(!document.getElementById){
return false;
}
if(!document.getElementById("imagegallery")){
return false;
}
var galleray = document.getElementById("imagegallery");
var links = galleray.getElementsByTagName("a");
for(var i = 0, length = links.length;i<length;i++){
links[i].onclick = function(){
return showPic(this);
}
}
}
function addLoadEvent(func){//此函数添加addLoadEvent(prepareNode); addLoadEvent(prepareShow);前面的会被覆盖
var oldonload = window.onload;
if(typeof window.onload != 'function'){
console.log(typeof window.onload);
window.onload = func;
}else{
window.onload = function(){
oldonload;
func();
}
}
}
//addLoadEvent(prepareNode); addLoadEvent(prepareShow);
window.onload = function(){
prepareNode();
prepareShow();
}
</script>
</head>
<body>
<h1>snapshot</h1>
<ul id="imagegallery">
<li>
<a href="imge/city.jpg" title="a beautifull city"> <!--onclick="showPic(this);return false"-->城市风景</a>
</li>
<li>
<a href="imge/food.jpg" title="lots of food" ><!--onclick="showPic(this);return false"-->两个盘子的食物</a>
</li>
<li>
<a href="imge/person.jpg" title="the man is not"> <!--onclick="showPic(this);return false"-->动漫人物</a>
</li>
<li>
<a href="imge/woman.jpg" title="a beautifull woman" ><!--onclick="showPic(this);return false"-->一个漂亮的女人</a>
</li>
</ul>
</body>
</html>