1

我创建了一个 js 文件并创建了一个函数，它应该做的是每次加载我的页面时更改一次图像..

function swapPic() {
    var imgSrc = [];
    imgSrc[0] = "/Content/Resources/cafe1.jpg";
    imgSrc[1] = "/Content/Resources/cafe2.jpg";
    imgSrc[2] = "/Content/Resources/cafe3.jpg";
    imgSrc[3] = "/Content/Resources/cafe4.jpg";
    imgSrc[4] = "/Content/Resources/cafe5.jpg";
    imgSrc[5] = "/Content/Resources/cafe6.jpg";

    var randomnumber = Math.floor(Math.random() * 5);
    var img = document.getElementById("imgContainer");
    img.setAttribute("src", imgSrc[randomnumber]);
    // alert("ok");
}

在我的 html 代码中，在我的 img 标签中：

<img id="imgContainer"  src="~/Content/Resources/cafe3.jpg" onload="swapPic()"/>

添加该alert("ok")行并重新加载页面一次，警报窗口不断弹出并且图像发生变化。我一直关闭窗口，它仍然弹出并且图像发生变化。它只是在一段时间后停止了。

所以我想，在我没有包括那条alert("ok")线的时间里，我的函数被连续调用并停止。它发生得如此之快，使它看起来很好。

我认为这是一个问题。你知道伙计们如何确保我的函数只被调用一次？

4

4 回答 4

4

您应该添加onload，body而不是img。

<body onload="swapPic();">
    <img id="imgContainer"  src="~/Content/Resources/cafe3.jpg"/>
</body>

如果添加onload到img，则每次加载图像时都会调用该函数，从而导致无限循环。

如果您无法修改body标签，请将您当前的功能替换swapPic()为：

(function swapPic() {
    var imgSrc = [];
    imgSrc[0] = "/Content/Resources/cafe1.jpg";
    imgSrc[1] = "/Content/Resources/cafe2.jpg";
    imgSrc[2] = "/Content/Resources/cafe3.jpg";
    imgSrc[3] = "/Content/Resources/cafe4.jpg";
    imgSrc[4] = "/Content/Resources/cafe5.jpg";
    imgSrc[5] = "/Content/Resources/cafe6.jpg";

    var randomnumber = Math.floor(Math.random() * 5);
    var img = document.getElementById("imgContainer");
    img.setAttribute("src", imgSrc[randomnumber]);
    // alert("ok");
})();

这将只执行一次。无需在任何地方调用它。

于 2012-12-29T16:57:03.930 回答
3

您已附加onload到图像。在这种情况下swapPic()，将在每次图像加载时调用。所以，发生的是一个无限循环——你调用swapPic()它，它会加载一个再次触发的新图像swapPic()。有关更多信息，请查看W3Schools：Event - Img Onload。

你应该移动swapPic()到身体。swapPic()这将仅在加载主体时触发。

另一种方法是使用javascript：

// if you have jQuery
$(document).ready(function(){
    swapPic()
});

// ordinary javascript
window.onload = function() {
    swapPic();
}
于 2012-12-29T16:57:42.880 回答
3

图像有自己的加载事件，指的是图像何时完成加载。因此，每次更新 src 时，浏览器当然会开始加载图像，并在完成加载后再次触发事件。循环重复。

您可以window.onload只调用一次函数，因为窗口的加载事件只能发生一次。

于 2012-12-29T16:59:56.410 回答
2

使用选项卡中的 onload 功能。顺便说一句，根据您的代码，您imgSrc[5] = "/Content/Resources/cafe6.jpg";将永远不会显示，因为您的随机函数仅生成 0-4。它应该是 var randomnumber = Math.floor(Math.random() * 6);

于 2012-12-29T17:11:45.947 回答