Отображение случайного изображения при загрузке страницы без использования загрузки в теге body - PullRequest
Новая
       9

Отображение случайного изображения при загрузке страницы без использования загрузки в теге body

4 голосов
/ 06 мая 2010

Я пытаюсь создать довольно простой фрагмент JavaScript, который отображает случайное изображение из массива при каждой загрузке страницы.Мне нужно выяснить способ запустить это без добавления кода в тег body.Есть ли способ сделать это без, скажем, функции onload, помещенной в тег body?

Вот что у меня есть, что зависит от 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)])
    }

Любые альтернативные идеи для достиженияэто?

Ответы [ 9 ]

12 голосов
/ 06 мая 2010

Ответ Уомблтона - это то, что я бы сделал. Однако есть и другой способ сделать это. В разметке тела, куда бы вы ни поместили это случайное изображение, поместите скрипт, который делает document.write с разметкой для изображения. Убедитесь, что у вас есть массив URL-адресов изображений и их замена, например: 

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

3 голосов
/ 06 мая 2010

Адаптировано из функции 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 );
  }
})();
1 голос
/ 19 апреля 2014

С некоторыми изменениями этот код будет загружать изображения случайным образом и соответствующую ссылку для загрузки. 

 <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>
0 голосов
/ 24 декабря 2015

Добавить изображение в массив с полным путем или путем к каталогу, после обновления изображения страницы добавить в тег body, например <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>
0 голосов
/ 24 марта 2015

Ваш ответ можно найти на 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 и назвать их как угодно, а также заполнить массивы любым отображаемым html или jscript, а также неограниченным числом на массив в формате csv Вы также можете создать как можно больше новых функций getAd с разными именами, чтобы на одной странице отображалось несколько уникальных объявлений iframe

0 голосов
/ 06 мая 2010

вам не нужна загрузка в теге body - добавьте обработчик в скрипт, в голове или в другом скрипте, который загружается перед телом. 

(function(){
  var fun=function(){
  // definefunction
  }
  if(window.addEventListener){
      window.addEventListener('load', fun,false);
      else if(window.attachEvent)window.attachEvent('load', fun);
 })();
0 голосов
/ 06 мая 2010

Вы можете просто использовать document.write для генерации тега img.Или даже что-то вроде <img src="javascript:Math.round(Math.random()*3)+'.jpg';" />

0 голосов
/ 06 мая 2010

Только не помещайте свой JavaScript в функцию.

Если вы отключите функцию, она будет работать при загрузке страницы.

Когда он находится в функции, он не будет работать, пока не будет вызван.

0 голосов
/ 06 мая 2010

Вы можете поместить это в javascript внизу страницы с таймаутом.

setTimeout (swapImage, 500); или что-то подобное.

...