时间戳

首页 > 解决方案 > Javascript随机不加载

javascript - Javascript随机不加载

问题描述

我有一个正在编码的页面，它应该在每个页面加载时运行这个 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>

这是取自这支笔，它完美无瑕。所以我很困惑为什么它不能持续为我工作。

我在 Windows 10 (1803) 中运行 Chrome (67.0.3396.99)，并且此代码正在扩展Super Evil New Tab中运行，其中包含 HTML、CSS 和 JS 部分。

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

编辑：我忘了提到扩展似乎只是将 HTML 粘贴到正文中。

标签： javascripthtmlcss

解决方案

修复不一致的 JavaScript 初始化执行的最简单、不依赖于库的方法是更改<body onload="randombg">​​为 just<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...
});

推荐阅读