关于JS的一些问题

<!DOCTYPE html>

<html>

<head>

<title>Image Gallery</title>

margin: 0;

padding: 0;

}

body{

width: 960px;

margin: 30px auto;

background: rgba(134,205,80,0.2);

}

ul{

display: inline-block;

width: 100%;

padding: 20px;

}

li{

list-style: none;

width: 20%;

float: left;

}

text-decoration: none;

color: #000;

}

img{

width: 640px;

height: 400px;

}

padding: 20px 0;

}

</style>

function addLoadEvent(func){

var oldonload=window.onload;

if(typeof window.onload!='function'){

window.onload=func;

}else{

window.onload=function(){

oldonload();

func();

}

addLoadEvent(prepareGallery);

function showPic(whichpic){

if(!document.getElementById('placeholder')) return false;

var source=whichpic.getAttribute('href');

var placeholder=document.getElementById('placeholder');

placeholder.setAttribute('src',source);

if(document.getElementById('description')){

var text=whichpic.getAttribute('title')?whichpic.getAttribute('title'):'';

var description=document.getElementById('description');

description.firstChild.nodeValue = text;

}

return true;

}

function prepareGallery(){

if(!document.getElementsByTagName) return false;

if(!document.getElementById) return false;

if(!document.getElementById('gallery')) return false;

var gallery=document.getElementById('gallery');

var link=gallery.getElementsByTagName('a');

for(var i=0;i<link.length;i++){

link[i].onclick=function(){

return !showPic(this);

}

</script>

</head>

<body>

<h1>Image Gallery</h1>

<li><a href="img/2.jpg" title="image2" target="_blank">image2</a></li>

<li><a href="img/3.jpg" title="image3">image3</a></li>

<li><a href="img/4.jpg" title="image4">image4</a></li>

<li><a href="img/5.jpg" title="image5">image5</a></li>

</ul>

<p id="description">image gallery</p>

</body>

</html>

关于addLoadEvent

addLoadEvent(prepareGallery);这一操作

window.onload涉及到两个函数，一个是prepareGallery，一个是showPic，但为什么只有addLoadEvent(prepareGallery);没有addLoadEvent(showPic);呢？

另外问一下，JS的执行顺序是怎样的呢？是不是先把所有的函数加载完毕。那这样的话，没有addLoadEvent(showPic);shoePic函数里的doucument,getElementById等操作应该获取不到，为什么会正常运行呢？

如果在addLoadEvent(prepareGallery);后面加上addLoadEvent(showPic);代码依然可以正常运行，但是会显示

index.html:60 Uncaught TypeError: Cannot read property 'getAttribute' of undefined

at showPic (index.html:60)

at window.onload (index.html:48)

检查了一下也没有写错什么字母单词、标点符号，也没漏掉括号为什么会有错误

麻烦解释一下这三个问题(图片请修改后测试)

sherryliu 2017-12-20

源自：项目：JS实现轮播特效 6-1 案例总结

收起

2回答

小丸子爱吃菜 2017-12-21 09:23:56

因为bbb在aaa中调用了啊，函数没有被调用，浏览器解析到函数的代码时，就会略过函数，往后继续解析。

收起回答

小丸子爱吃菜 2017-12-20 17:29:17

1、这段代码不是你自己写的吧？

showPic在函数prepareGallery中被调用了，它的功能是图片的显示，是需要在prepareGallery中被调用的。

2、JS的执行顺序是从上到下的。

3、showPic里面是有参数的，直接调用是要传参的，在prepareGallery中被调用时，就传入了参数。

轮播图还是先按照老师的代码和思路去写，先理解了简单的，然后再慢慢去拓展。

祝学习愉快！

收起回答

提问者 sherryliu #1

showPic在函数prepareGallery中被调用了问题：函数的加载不是应该在调用之前吗？

2017-12-20 19:18:17
提问者 sherryliu #2

把问题简化了一些， <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript"> window.onload=aaa; function aaa(){ alert(document.getElementById('text')); bbb(); } function bbb(){ alert(document.getElementById('div0')); } </script> </head> <body> <p id="text">hello</p> <div id="div0">world</div> </body> </html> 为什么函数bbb在aaa里调用，bbb就不用window.onload

2017-12-20 19:36:08