javascript 中潜在的函数重载：命名问题

Question

我是 Javascript 的新手，但我能够拼凑一些东西以在页面加载时创建随机背景图像。这已成功用于页面上的 Div 对象。

由于效果很好，我想对同一页面上的第二个 Div 对象再次使用此命令。两个 Div 都有单独的 CSS 样式名称，所以我认为这样就可以了。但是，当我同时使用这两个命令时，只有一个会起作用。

我认为这是一个过载问题，但我尝试重命名所有可能的内容，但仍然没有解决。是否还有其他我需要重命名的东西我丢失了，或者我是否需要以不同的方式构建两个单独的命令？

下面是JS代码，CSS和HTML：

提前致谢！

/*! random background image 2*/
window.onload = function frontimage() {    
 var thediv2 = document.getElementById("topimg");
 var imgarray2 = new Array("f1.svg", "f2.svg");
 var spot2 = Math.floor(Math.random()* imgarray2.length);
 thediv2.style.background = "url(img/f-img/"+imgarray2[spot2]+")";
 thediv2.style.backgroundSize = "70%";
 thediv2.style.backgroundAttachment = "fixed";
 thediv2.style.backgroundRepeat = "no-repeat";
 thediv2.style.zIndex = "2";
 thediv2.style.backgroundColor = "rgba(255,204,255,0.5)";

}

/*! random background image 1*/
window.onload = function backimage() {    
 var thediv = document.getElementById("imgmain");
 var imgarray = new Array("b1.jpg", "b2.jpg", "b3.jpg", "b4.jpg", "b5.jpg");
 var spot = Math.floor(Math.random()* imgarray.length);
 thediv.style.background = "url(img/b-img/"+imgarray[spot]+")";
 thediv.style.backgroundSize = "100%";
 thediv.style.backgroundAttachment = "fixed";
 thediv.style.backgroundRepeat = "no-repeat";
 thediv.style.zIndex = "1";

}

#bigimg {
 clear: both;
 float: left;
 margin-left: 0;
 width: 100%;
 display: block;
}

#imgmain {
 background: 50% 0 no-repeat fixed;
 z-index: 1;
 width: 100%;
}

#topimg {
 z-index: 2;
 position: absolute;
 background-image: url(../img/f-img/f2.svg);
 background-repeat: no-repeat;
 background-position: 50% -25%;
 background-size:contain;
 width: 100%;
 margin: auto;
 padding: 0;
}

  <div id="bigimg">
    <section id="imgmain"></section>
 <section id="topimg"></section>    


  </div>

Answer 1

您正在通过重新分配回调函数来覆盖您的第一个 window.onload。

试试这个：

window.onload = function() {
     frontimage();
     backimage();
}

Answer 2

使用 addEventListener，您可以添加任意数量的事件处理程序。

window.addEventListener('load', function frontimage() {    
  // ...
});

window.addEventListener('load', function backimage() {    
  // ...
});

javascript 中潜在的函数重载：命名问题

Potential function overloading in javascript: naming issue

javascript

overloading