Affichage aléatoire de l'image lors du chargement de la page sans utiliser le onload de la balise body

Je suis en train de créer un assez simple morceau de code JavaScript qui affiche une image aléatoire à partir d'un tableau à chaque fois que le chargement de la page. J'ai besoin de trouver un moyen d'obtenir cette running sans ajouter de code de la balise body. Est-il un moyen pour accomplir cette sans, dire, une fonction onload placé dans la balise body?

Voici ce que j'ai, qui s'appuie sur le 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)])
    }

Toutes les idées alternatives pour accomplir cette?

Puis-je vous demander pourquoi vous ne voulez pas cela dans le onload de la fonction?

OriginalL'auteur Peachy | 2010-05-05

Wombleton réponse est ce que je ferais. Cependant, il est une autre façon de le faire. Dans le corps de balisage, partout où vous allez mettre cette image aléatoire, mettre un script qui effectue un document.écrire avec le balisage de l'image. Assurez-vous que vous avez un tableau d'Url de l'image et de substitution, comme suit:

<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>

Encore une fois, ce n'est pas l'idéal, mais c'est utile si vous ne voulez pas utiliser n'importe quel type d'événement onload, non seulement l'un de vous mettre dans le <body> tag.

OriginalL'auteur Robusto

Adapté à partir de jQuery ready fonction, et en faisant certaines hypothèses sur les types d'image:

(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 );
  }
})();

OriginalL'auteur wombleton

Avec quelques modifications de ce code permet de charger des images au hasard et son lien respectif pour le charger.

 <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>

OriginalL'auteur Elenasys

0

Vous pouvez placer ceci en javascript en bas de la page, avec un délai d'attente.

setTimeout(swapImage, 500); ou somesuch.

OriginalL'auteur Anthony
0

Il suffit de ne pas vous mettre de javascript à l'intérieur d'une fonction.

si vous sortez de la fonction, il sera exécuté lors du chargement de la page.

Quand il est dans la fonction, il ne fonctionnera pas, sauf si.

Vous devez être prudent avec cette. Si c'est au mauvais endroit, le javascript peut être appelée avant l'élément ("image"). Cela va conduire à des erreurs.

OriginalL'auteur Senica Gonzalez
0

Vous pouvez simplement utiliser document.écrire pour générer la balise img. Ou même quelque chose comme <img src="javascript:Math.round(Math.random()*3)+'.jpg';" />

OriginalL'auteur Tgr

vous n'avez pas besoin d'un onload de la balise body - ajouter un gestionnaire dans le script,
dans la tête, ou dans un autre script qui se charge avant le corps .

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

OriginalL'auteur kennebec

Votre réponse peut être trouvé à glados.cc/myfaucet.

il y a un script pour télécharger il qui possède le code que vous cherchez
voici un bref résumé:
créer le fichier config.php et mettre ceci à l'intérieur:

<?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>
');
?>

Puis, sur la page que vous êtes en servir, dire, index.php pour afficher vos aléatoire des liens ou des images ou du texte dit simplement:

<?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";
?>

Bien sûr, vous pouvez créer autant de xxxAds des tableaux et de les nommer ce que vous voulez, et vous pouvez remplir les tableaux avec quoi que ce soit html ou jscript pour être affichées, ainsi qu'un nombre illimité par matrice, au format csv
vous pouvez également créer autant de nouveaux "getAd" fonctions avec des noms différents, de sorte que vous pouvez avoir plusieurs unique iframe annonces affichées sur une seule page

OriginalL'auteur user2671076

Ajouter une image dans un tableau avec plein de chemin ou chemin d'accès au répertoire, après actualisation de la page de l'image ajouter dans la balise body comme <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>

OriginalL'auteur Kishan Chauhan

Vous devez vous connecter pour publier un commentaire.