Question

我正在尝试创建一个相当简单的JavaScript，每次加载页面时都会显示一个数组中的随机图像。我需要弄清楚如何在不向body标签添加代码的情况下运行此方法。有没有办法在没有放置在body标签中的onload函数的情况下完成此操作？

这就是我所依赖的onLoad：

    ImageSwitch=new Array();
    ImageSwitch[0]='1.jpg';
    ImageSwitch[1]='2.jpg';
    ImageSwitch[2]='3.jpg';
    ImageSwitch[3]='4.jpg';

    function swapImage() 
    {
        document.getElementById("theImage").setAttribute("src", ImageSwitch[

Math.round(Math.random()*3)])
    }

要实现这一目标的任何其他想法吗？

Answer 1

Wombleton的答案是我会做的。但是，还有另一种方法可以做到这一点。在正文标记中，无论您要将随机图像放在何处，都可以使用带有图像标记的document.write脚本。确保您有一系列图片网址和替代品，如下所示：

<html>
<head>
<title>Test</title>
<script type="text/javascript">
  var imageURLs = [
       "http://www.myserver.com/images/image1.png"
     , "http://www.myserver.com/images/image2.png"
     , "http://www.myserver.com/images/image3.png"
  ];
  function getImageTag() {
    var img = '<img src=\"';
    var randomIndex = Math.floor(Math.random() * imageURLs.length);
    img += imageURLs[randomIndex];
    img += '\" alt=\"Some alt text\"/>';
    return img;
  }
</script>
</head>
<body>
<script type="text/javascript">
  document.write(getImageTag());
</script>
</body>
</html>

同样，这并不理想，但如果您不想使用任何类型的onload事件，而不仅仅是您放在<body>标记中的事件，那么它非常有用。

Answer 2

改编自jQuery的ready函数，并对图像类型做出一些假设：

(function() {
  var urls = ['1', '2', '3', '4'];
  function swap() {
    document.getElementById('theImage').setAttribute('src', urls[Math.round(Math.random() * urls.length)] + '.jpg');
  }

  // Mozilla, Opera and webkit nightlies currently support this event
  if ( document.addEventListener ) {
    window.addEventListener( 'load', swap, false );
  // If IE event model is used
  } else if ( document.attachEvent ) {
    window.attachEvent( 'onload', swap );
  }
})();

Answer 3

通过一些更改，此代码将随机加载图像并加载相应的链接。

 <html>
<head/>
<title>Jorgesys Html test</title>
<script type="text/javascript">
  var imageUrls = [
       "http://prueba.agenciareforma.com/appiphone/android/img/newspapers/stackoverflow.png"
     , "http://ww.mydomain.com/img/newspapers/reforma.png"
     , "http://ww.mydomain.com/img/newspapers/nytimes.png"
     , "http://ww.mydomain.com/img/newspapers/oglobo.png"
     , "http://ww.mydomain.com/img/newspapers/lefigaro.png"
     , "http://ww.mydomain.com/img/newspapers/spiegel.png"
  ];
 var imageLinks = [
       "http://www.stackoverflow.com"
      , "http://www.reforma.com"
       , "http://www.nytimes.com/"
      , "https://oglobo.globo.com/"
      , "http://www.lefigaro.fr/international/"
     , "http://www.spiegel.de/international/"    
  ];

  function getImageHtmlCode() {
    var dataIndex = Math.floor(Math.random() * imageUrls.length);
    var img = '<a href=\"' + imageLinks[dataIndex] + '"><img src="';        
    img += imageUrls[dataIndex];
    img += '\" alt=\"Jorgesys Stackoverflow.com\"/></a>';
    return img;
  }
</script>
</head>
<body bgcolor="white">
<script type="text/javascript">
  document.write(getImageHtmlCode());
</script>
</body>
</html>

Answer 4

你可以将它放在页面底部的javascript中，并暂停。

setTimeout（swapImage，500）;或某些。

Answer 5

只是不要把javascript放在函数中。

如果你把它从函数中取出，它将在页面加载时运行。

当它在函数中时，除非被调用，否则它不会运行。

Answer 6

您可以使用document.write生成img标记。甚至像<img src="javascript:Math.round(Math.random()*3)+'.jpg';" />

这样的东西

Answer 7

你不需要在body标签中加载onload-在脚本中添加一个处理程序，在头部，或在身体前加载的另一个脚本。

(function(){
  var fun=function(){
  // definefunction
  }
  if(window.addEventListener){
      window.addEventListener('load', fun,false);
      else if(window.attachEvent)window.attachEvent('load', fun);
 })();

Answer 8

您的回答可以在glados.cc/myfaucet找到有一个下载脚本，其中包含您正在寻找的代码这是一个简短的概要：创建文件config.php并将其放入：

<?php 
// Advertisement Codes
// All ads rotate. There are 3 types: square, text, and banner. Add HTML code to the array

$squareAds = array('<iframe scrolling="no" style="border: 0; width: 250px; height: 250px;" src="http://myadserver.com"></iframe>');

$textAds = array('<p><strong><a href="http://yoururl.com">YourURL</a></strong></p>', '<p><strong>Get your own site</strong> <a href="http://yoursite.com">here</a></p>');

$bannerAds = array('<iframe scrolling="no" style="border: 0; width: 468px; height: 60px;" src="http://youradserver.com"></iframe>
');
?>

然后，在你正在服务的页面上，比如index.php来显示你的随机链接或图片或文字：

<?php
require_once('config.php');
function getAd($arr){
    return $arr[rand(0, count($arr)-1)];
}
echo "any plain text or html" . getAd($textAds) . "any plain text or html" . getAd($bannerAds) . "any plain text or html" . getAd($squareAds) . "any plain text or html";
?>

当然，您可以创建任意数量的$ xxxAds数组并将它们命名为您想要的任何数组，并且您可以使用csv格式填写数组以及要显示的任何html或jscript，以及每个数组的无限数量你也可以创建尽可能多的新＆＃34; getAd＆＃34;具有不同名称的功能，以便您可以在一个页面上显示多个唯一的iframe广告

Answer 9

在完整路径或目录路径的数组中添加图像，刷新页面图像添加到<body background="images/image1.jpg">

等正文标记后

<script type="text/javascript">
function changeRandomimage() {
    var imageArray = ["images/image1.jpg","images/image2.jpg","images/image3.jpg"];
    var randomImage = Math.floor(Math.random() * imageArray.length);
    document.body.background = imageArray[randomImage];
}
changeRandomimage();
</script>

在页面加载时显示随机图像，而不使用body标签中的onload

9 个答案: