我有一个正在编写代码的页面,它应该在每次页面加载时运行此 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
方式,如果你选择做的不仅仅是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 随机不加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51109535/