Question

我有一个正在编写的页面，并且应该在每次页面加载时运行此Javascript。问题是，它似乎完全随机加载。有时它会运行，有时却不会。每次重装对于它是否有效似乎都是完全随机的。这非常令人沮丧，因为我现在无法想象这是代码的问题。

function randombg() {
  var random = Math.floor(Math.random() * 6) + 0;
  var bigSize = ["url('http://lh4.googleusercontent.com/-dsFg9OnYo5Q/T0hK7b0-xoI/AAAAAAAABL4/9_CPzXBCMfw/s800/animated%2520blue%2520stars.gif')",
    "url('https://background-tiles.com/overview/blue/patterns/large/1026.gif')",
    "url('https://78.media.tumblr.com/395d407e0762d7041cbe0197e3ea288c/tumblr_o3fxwiIAq61v8fqfeo1_540.gif')",
    "url('http://backgroundcheckall.com/wp-content/uploads/2017/12/seamless-repeating-background-gif-12.gif')",
    "url('https://other00.deviantart.net/b3aa/o/2009/312/0/8/143009517_95116_animated_starfield_tile.gif')",
    "url('http://backgroundcheckall.com/wp-content/uploads/2017/12/seamless-repeating-background-gif-10.gif')"
  ];
  document.getElementById("random").style.backgroundImage = bigSize[random];
  alert("Success");
}

window.onload = randombg;
window.onresize = randombg;

#random {
  width: 100%;
  height: 450px;
  border: 1px solid black;
  background-image: url('http://placehold.it/300&text=banner1');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

<body onload="randombg">
  <div id="random"></div>

  <body>

这取自this pen，可以正常工作。因此，对于为什么它对我而言无法始终如一地工作，我感到非常困惑。

我正在Windows 10（1803）中运行Chrome（67.0.3396.99），并且该代码正在扩展Super Evil New Tab中运行，该扩展包含HTML，CSS和JS部分。

感谢您的任何反馈或建议。

编辑：我忘了提到扩展名，似乎只是将HTML插入正文中。

Answer 1

解决不一致的JavaScript初始化执行的最简单，与库无关的方法是将<body onload="randombg">更改为<body>，然后将JavaScript插入脚本标记之前，如下所示：

<script src="path/to/your/js/file/here.js"></script>
<body>
    <div id="random"></div>
</body>

然后在您的JavaScript文件中，不要使用window.onload = ...，请执行以下操作：

// This method of attaching a function to a DOM event allows for more flexibility down the line.
window.addEventListener('load', randombg);

window.addEventListener('resize', randombg);

如果您使用这种addEventListener方式，并且在randombg和load事件中选择不只是resize做某事，那么您可以做

window.addEventListener('load', () => {
    randombg();
    // more code to perform on load here...
});

window.addEventListener('resize', () => {
    randombg();
    // more code to perform on window resize here...
});

Javascript随机未加载

1 个答案: