為什么這個代碼去掉window.onload = function(){}就會出現錯誤呢？
為什么這個代碼去掉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>
2016-11-16
你試試將window.onload=function(){}去掉之后在控制臺打印console.log(imgWidth);是不是輸出為0？這個意思就是不加的話，js優先于圖片加載
2016-10-31
因為js加載順序是：css，html，js代碼加載（按照從上往下順序）—>頁面渲染 —>... —>最后是圖片的加載；
你這里是動態的對圖片位置進行調整，如果不加window.onload，當按照從上往下順序，當讀取到js代碼時，圖片還未加載進去，只是對<img>這個空的框架進行位置調整；
而加了window.onload，就是頁面完全加載成功（包括圖片），這時代碼中imgWidth的值是不同的， 比原來的框架多了圖片的寬度；
可以不加window.onload，將代碼中var imgWidth = imgs[0].offsetWidth;改成var imgWidth="第一張圖片的寬度"進行驗證?
2016-07-28
window.onload是指基于頁面加載完成后才做的事情，若頁面沒加載完，滑動效果也就無法實現。