javascript - 为什么 onload 会导致我的图像切换闪烁？

Question

出于某种原因，当我在我的 img 标签上使用属性 onload 时，它会导致我的图像闪烁。理想情况下，当我加载页面时，会显示图像，当我刷新页面时，图像会发生变化。这是我的标签及其功能:

HTML

<img id="randomimage" onload="randomImg()" src="images/carmainpic.jpg" alt="main pic of car"/>

JavaScript

function randomImg(){
    var images=["images/carmainpic.jpg","images/carmainpic2.jpg","images/carmainpic3.jpg"];
    var num=Math.floor(Math.random()*3);
    document.getElementById("randomimage").src=images[num];
}

Answer 1

因为您调用的函数更改了图像的 src从数组中随机选择，触发新的 load事件，它改变了 src再次随机等等。至少在某些浏览器上，当您碰巧分配图像已有的 URL 时，循环可能会停止。

如果您的目标只是随机显示其中一张图片，您可以通过留下 src 来实现。关闭 img完全然后用脚本添加它(一次)(紧跟在 img 之后，以避免在添加它时必须调整布局，或者如果您愿意，可以在页面末尾的脚本中添加它；无需等待对于任何事件):

<img id="randomimage" alt="main pic of car"/>
<script>
(function() {
    var images=["images/carmainpic.jpg","images/carmainpic2.jpg","images/carmainpic3.jpg"];
    var num=Math.floor(Math.random() * images.length); // <== Note change, so adding images to the array Just Works
    document.getElementById("randomimage").src=images[num];
})();
</script>

即使您将脚本紧跟在 <img ...> 之后标记，img元素将可用于脚本。因此，您可以选择是内联执行还是与页面末尾的其他脚本一起执行。