为什么这个代码去掉window.onload = function(){}就会出现错误呢？
慕粉1463572084
2016-07-28 19:38
为什么这个代码去掉window.onload = function(){}就会出现错误呢？
<style type="text/css">
#contain{
height:477px;
position:relative;
margin:0 auto;
overflow: hidden;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
img{
display: block;
position: absolute;
left:0;
border-left: 1px solid #ccc;
}
</style>
</head>
<body>
<div id='contain'>
<img src="img/door1.png" />
<img src="img/door2.png" />
<img src="img/door3.png" />
<img src="img/door4.png" />
</div>
<script type="text/javascript">
// window.onload = function(){
var imgs = document.getElementsByTagName('img');
var box = document.getElementById('contain');
var exploseWidth = 160;
var imgWidth = imgs[0].offsetWidth;
var boxWidth = imgWidth + (imgs.length-1) * exploseWidth;
box.style.width = boxWidth + 'px';
function startMove(){
for(var i=1;i<imgs.length;i++){
imgs[i].style.left = imgWidth + exploseWidth * (i-1) + 'px';
}
}
startMove();
// }
</script>
</body>
3回答
-
- Encoretune
- 2016-11-16 14:41:32
你试试将window.onload=function(){}去掉之后在控制台打印console.log(imgWidth);是不是输出为0？这个意思就是不加的话，js优先于图片加载
-
- stone310
- 2016-10-31 00:00:34
因为js加载顺序是：css，html，js代码加载（按照从上往下顺序）—>页面渲染 —>... —>最后是图片的加载；
你这里是动态的对图片位置进行调整，如果不加window.onload，当按照从上往下顺序，当读取到js代码时，图片还未加载进去，只是对<img>这个空的框架进行位置调整；
而加了window.onload，就是页面完全加载成功（包括图片），这时代码中imgWidth的值是不同的， 比原来的框架多了图片的宽度；
可以不加window.onload，将代码中var imgWidth = imgs[0].offsetWidth;改成var imgWidth="第一张图片的宽度"进行验证
-
- 慕莱坞9987855
- 2016-07-28 21:40:42
window.onload是指基于页面加载完成后才做的事情，若页面没加载完，滑动效果也就无法实现。
DOM探索之基础详解篇
98372 学习 · 238 问题
相似问题