Javascript 随机不加载

标签 javascript html css

我有一个正在编写代码的页面,它应该在每次页面加载时运行此 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 粘贴到正文中。

最佳答案

修复 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方式,如果你选择做的不仅仅是randombgloadresize事件,你可以做

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

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

关于Javascript 随机不加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51109535/

相关文章:

javascript - Vue + 传单 : Can't call method inside Vue object

html - less 是不是像 CSS 一样被浏览器解释?

html - 让一个div填充剩余屏幕空间的高度

css - 在现有的 div 之上添加层

javascript - 如何在不同的 HTML 元素上重用 JS 函数

css - 如何在 bootstrap 4 中自定义工具提示

javascript - JavaScript 中的逻辑运算符评估

javascript - 使用 Number.toLocaleString() 的货币格式差异

javascript - 通过按钮使用 javascript AJAX 功能更新数据库

删除特定字段的Javascript方法