Question

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

HTML

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

使用JavasScript

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然后再添加（{1}} ）使用脚本（紧跟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元素。因此，您可以选择内联还是使用页面末尾的其他脚本。

Answer 2

每次加载图像时都会调用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];
    }
}

Answer 3

问题是您正在侦听图像上的load事件，而不是页面。

onload="randomImg()"

因此，只要加载第一个图像，它就会触发函数randomImg，这会导致图像上src属性的更改。因此，浏览器将尝试为元素分配新图像，并触发另一个加载事件，从而重复整个周期。

相反，如果您想在页面加载时选择随机图像，则可以在文档上收听DOMContentLoaded事件，并选择随机图像。

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];
    
    console.log("Showing: " + images[num]);
});

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

注意：由于您选择的是随机图片，因此无法保证在刷新页面时始终会获得不同的图片。相反，如果您必须在刷新页面时获得不同的图像，则可以在localStorage中保留图像标识符，并使用它来确定要显示的下一个图像。

Answer 4

你可以使用$（document）.ready（function（）{}）来做到这一点。因为你想在为执行它的功能的页面充电时。

＆＃13;

$(document).ready(function(){

  
  function randomImg(){
      var images=["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];
  }
  
  randomImg();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="randomimage" src="" alt="main pic of car"/>

＆＃13;

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

4 个答案: