Javascript 为什么onload会导致图像切换闪烁？

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

HTML

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

---

因为您正在调用的函数将图像的

src

更改为从数组中随机选取，从而触发一个新的

load

事件，该事件再次随机更改

src

，等等。至少在某些浏览器上，当您碰巧分配了图像已经具有的URL时，该循环可能停止

如果您的目标是随机显示其中一幅图像，您可以将

src

完全关闭

img

，然后使用脚本添加它（一次）（可以紧跟在

img

之后，以避免在添加布局时需要调整布局，也可以在页面末尾使用脚本（如果愿意），无需等待任何事件）：

---

即使您将脚本放在

标记之后，

img

元素也将对脚本可用。因此，您可以选择是内联执行还是与页面末尾的其他脚本一起执行。

因为您调用的函数将图像的

src

更改为从数组中随机选取，触发一个新的

load

事件，再次随机更改

src

，等等。至少在某些浏览器上，当您碰巧分配了图像已有的URL时，该循环可能会停止

如果您的目标是随机显示其中一幅图像，您可以将

src

完全关闭

img

，然后使用脚本添加它（一次）（可以紧跟在

img

之后，以避免在添加布局时需要调整布局，也可以在页面末尾使用脚本（如果愿意），无需等待任何事件）：

---

即使您将脚本放在

标记之后，

img

元素也将对脚本可用。因此，您可以选择是内联执行还是在页面末尾与其他脚本一起执行。

每次加载图像时都会调用

随机img

函数。您可以使用标志变量请确保仅更改图像一次：

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

---

每次加载图像时都会调用

randomImg

函数。您可以使用标志变量确保只更改图像一次：

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

---

问题是您正在侦听图像上的

load

事件，而不是页面

因此，一旦第一个图像加载，它就会触发函数

randomImg

，这会导致图像上的

src

属性发生变化。因此浏览器将尝试将新图像分配给元素，并触发另一个加载事件，重复整个循环

---

相反，如果要在页面加载时选择随机图像，可以侦听文档上的事件，然后选择随机图像

document.addEventListener（“DOMContentLoaded”，function（））{
var images=[“images/carmainpic.jpg”、“images/carmainpic2.jpg”、“images/carmainpic3.jpg”]；
var num=Math.floor（Math.random（）*3）；
document.getElementById（“randomimage”）.src=images[num]；
log（“显示：“+images[num]）；
})；

---

问题在于您正在收听图像上的

加载

事件，而不是页面

因此，一旦第一个图像加载，它就会触发函数

randomImg

，这会导致图像上的

src

属性发生变化。因此浏览器将尝试将新图像分配给元素，并触发另一个加载事件，重复整个循环

---

相反，如果要在页面加载时选择随机图像，可以侦听文档上的事件，然后选择随机图像

document.addEventListener（“DOMContentLoaded”，function（））{
var images=[“images/carmainpic.jpg”、“images/carmainpic2.jpg”、“images/carmainpic3.jpg”]；
var num=Math.floor（Math.random（）*3）；
document.getElementById（“randomimage”）.src=images[num]；
log（“显示：“+images[num]）；
})；

您可以使用$（document）.ready（function（）{}）来执行此操作。因为您希望在对页面充电时，该函数将执行此操作

$（文档）.ready（函数（）{
函数randomImg（）{
变量图像=[”https://www.bensound.com/bensound-img/romantic.jpg","https://www.psdstack.com/wp-content/uploads/2016/10/featured-copyright-free-mages.jpg","http://shaebaxter.com/wp-content/uploads/2015/04/Life-of-Pix-free-stock-photos-sea-peaople-water-waves-back-Sunset-Joshua-earle-1024x682.jpg"];
var num=Math.floor（Math.random（）*3）；
document.getElementById（“randomimage”）.src=images[num]；
}
随机img（）；
})；

您可以使用$（document）.ready（function（）{}）来执行此操作。因为您希望在对页面充电时，该函数将执行此操作

$（文档）.ready（函数（）{
函数randomImg（）{
变量图像=[”https://www.bensound.com/bensound-img/romantic.jpg","https://www.psdstack.com/wp-content/uploads/2016/10/featured-copyright-free-mages.jpg","http://shaebaxter.com/wp-content/uploads/2015/04/Life-of-Pix-free-stock-photos-sea-peaople-water-waves-back-Sunset-Joshua-earle-1024x682.jpg"];
var num=Math.floor（Math.random（）*3）；
document.getElementById（“randomimage”）.src=images[num]；
}
随机img（）；
})；

当页面完成加载时，它是只闪烁一次，还是持续闪烁？它持续闪烁：（当页面完成加载时，它是只闪烁一次，还是持续闪烁？）它持续闪烁：（或者只是将

此

传递到它（

onload=“randomImg（this）”

）然后

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

onload="randomImg()"