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

ProgramBox

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

Post author:admin
Запись опубликована:10 мая, 2023
Post category:Вопросы по программированию

#javascript

Вопрос:

Я использую скрипт на главной странице веб-сайта для фотографа, который отображает изображение, выбранное случайным образом из массива. Я нашел два разных скрипта, которые выполняют эту функцию. Я хотел бы знать, какой скрипт предпочтительнее и был ли он написан правильно или может быть улучшен. Интересно, возможно ли включить функцию, которая предотвратила бы повторную загрузку одного и того же изображения до тех пор, пока не будут использованы все изображения в массиве. Спасибо, что взглянули.

Версия 1

     <script type="text/javascript">
    <!--
    var theImages = new Array() 

            theImages[1] = 'portrait/fpo/01.jpg'
            theImages[2] = 'portrait/fpo/02.jpg'
            theImages[3] = 'portrait/fpo/03.jpg'
            theImages[4] = 'portrait/fpo/04.jpg'
            theImages[5] = 'portrait/fpo/05.jpg'
            theImages[6] = 'portrait/fpo/06.jpg'
            theImages[7] = 'portrait/fpo/07.jpg'
            theImages[8] = 'portrait/fpo/08.jpg'
            theImages[9] = 'portrait/fpo/09.jpg'
            theImages[10] = 'portrait/fpo/10.jpg'

    var j = 0
    var p = theImages.length;
    var preBuffer = new Array()
    for (i = 0; i < p; i  ){

            preBuffer[i] = new Image()
            preBuffer[i].src = theImages[i]
    }
    var whichImage = Math.round(Math.random()*(p-1));
    function showImage(){

            document.write('<img src="images/' theImages[whichImage] '">');
    }
    // -->
    </script>

     <table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%">
    <tr valign="middle"><td align="center">

            <a href="index.html"><script type="text/javascript">showImage();</script></a>

    </td></tr>
    </table>

Версия 2

     <script type="text/javascript">
    <!--
    var ic = 11; // Number of alternative images
    var xoxo = new Array(ic); // Array to hold filenames

    xoxo[0] = "images/portrait/fpo/01.jpg"
    xoxo[1] = "images/portrait/fpo/02.jpg"
    xoxo[2] = "images/portrait/fpo/03.jpg"
    xoxo[3] = "images/portrait/fpo/04.jpg"
    xoxo[4] = "images/portrait/fpo/05.jpg"
    xoxo[5] = "images/portrait/fpo/06.jpg"
    xoxo[6] = "images/portrait/fpo/07.jpg"
    xoxo[7] = "images/portrait/fpo/08.jpg"
    xoxo[8] = "images/portrait/fpo/09.jpg"
    xoxo[9] = "images/portrait/fpo/10.jpg"
    xoxo[10] = "images/portrait/fpo/11.jpg"

    function pickRandom(range) {
        if (Math.random)
            return Math.round(Math.random() * (range-1));
        else {
            var now = new Date();
            return (now.getTime() / 1000) % range;
        }
    }
    // Write out an IMG tag, using a randomly-chosen image name.
    var choice = pickRandom(ic);
    // -->
    </script>

     <table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%">
    <tr valign="middle"><td align="center">

            <a href="index-alternate.html"><script type="text/javascript">document.writeln('<img src="' xoxo[choice] '" >');</script></a>

    </td></tr>
    </table>

1. К вашему сведению, в первой версии отсутствует одно из ваших изображений. Я бы выбрал вариант 2. 1 загружает все изображения заранее (более полезно, если вы будете менять изображения во время загрузки страницы). Таким образом, он использует большую пропускную способность и замедлит загрузку вашей страницы.

Ответ №1:

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

 <html>
<head/>
<title>Jorgesys Android</title>
<script type="text/javascript">
  var imageUrls = [
       "http://stacktoheap.com/images/stackoverflow.png"
     , "http://stacktoheap.com/images/stackoverflow.png"
     , "http://stacktoheap.com/images/stackoverflow.png"
     , "http://stacktoheap.com/images/stackoverflow.png"
     , "http://stacktoheap.com/images/stackoverflow.png"
     , "http://stacktoheap.com/images/stackoverflow.png"
  ];
 var imageLinks = [
       "http://www.stackoverflow.com"
      , "http://www.reforma.com"
       , "http://www.nytimes.com/"
      , "http://www.elnorte.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 Android"/></a>';
    return img;
  }
</script>
</head>
<body bgcolor="black">
<script type="text/javascript">
  document.write(getImageHtmlCode());
</script>
</body>
</html>

Ответ №2:

Решил сделать это ответом.

К вашему сведению… К вашему сведению, в первой версии отсутствует одно из ваших изображений.

Я бы выбрал вариант 2. 1 загружает все изображения заранее (более полезно, если вы будете менять изображения, выполняя что-то типа слайд-шоу). Таким образом, он использует большую пропускную способность и замедлит загрузку вашей страницы.

2 выглядит нормально, но я мог бы изменить pickRandom (ic) на pickRandom (xoxo.length), чтобы вам не приходилось забывать об обновлении ic при добавлении новых изображений.

Вы, вероятно, захотите либо создать cookie для пользователя (lastImageIndex), чтобы перебирать элементы. Если файлы cookie недоступны, просто используйте случайное изображение. В противном случае начните со случайного изображения. Затем каждый раз доступ осуществляется с увеличением размера файла cookie. Когда вы достигнете нужной длины, вернитесь к 0.

 function getCookieValue(choice){
  // read cookie here, if found, parseInt(cookieValue,10) and assign to choice

  // Then return choice (either original value or updated)
  return choice;
}

var choice = pickRandom(xoxo.length);
choice = getCookieValue(choice);
// Check if it correspond to an image
if (choice >= xoxo.length) choice = 0;

// Store the cookie here.  Store choice

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

1. Это очень полезно. Спасибо benjynito. Если я изменю pickRandom (ic) на pickRandom (xoxo.length), как вы предлагаете, на что бы я изменил «var ic = 179; // Количество альтернативных изображений» и «var xoxo = новый массив (ic); // Массив для хранения имен файлов» на?

2. Вероятно, вы могли бы просто избавиться от ic и создать var xoxo = new Array(); Или var xoxo = new Array(17); Все, что он делает, это объявляет начальный размер массива. Это не помешает / имеет значение, если вы перейдете.

3. Пожалуйста, была ли идея cookie достаточной информацией, чтобы вы начали с этого? Моим алгоритмом было бы: функция getCookieValue(выбор){ // прочитайте cookie здесь, если найдено, присвоите choice // Затем верните choice (либо исходное значение, либо обновленное) return choice; } var choice = pickRandom(xoxo.length); choice = getCookieValue(выбор); // Проверьте, соответствует ли оно изображению, если (выбор>= xoxo.length) выбор = 0; // Сохраните cookie здесь. Выбор хранилища

4. Да, ваше предложение по использованию файлов cookie имеет смысл для меня в концепции. Мне нужно провести еще несколько исследований о том, как их использовать, прежде чем я узнаю, как реализовать их функцию на странице, поскольку я практически ничего не знаю о том, как это сделать. Вы, безусловно, дали мне направление, которому нужно следовать.

5. бенджинито, мне пришло в голову, что пользователь, который посещает эту страницу с отключенным javascript, увидит только html-элементы (меню), поскольку я полагался на javascript для отображения изображений. Есть ли способ перенаправить посетителя на страницу на основе html, если у него отключен javascript?