Javascript: всплывающее окно с фильмом из изображений в главном окне

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

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

Во всяком случае, вот снимок того, что я считаю соответствующим кодом:

<html>
<head>
<script language="javascript">
function wait() {}
function anim() {
  var timeout; var next;
  var popuptitle='Movie';
  var main=parent;
  var popup=parent.open("","",
      "width="+main.document.images[0].width+",height="+(main.document.images[0].height+40)+
      "toolbar=no,location=no,directories=no,status=no,"+
      "menubar=no,scrollbars=no,copyhistory=no,resizable=no");
  popup.document.write('<html><head><title>'+popuptitle+'</title></head><body>'+
    '<p align="center"><img name="anim" width="100%" alt=""></p>'+
    '<p align="center"><button name="close" onclick="javascript:window.close();">Close</button></p>'+
    '</body></html>');
  /*while(true)*/
  for(i=0; i<main.document.images.length; i++) {
    next=main.document.images[i].src;
    popup.document.images[0].src=next;
    timeout=setTimeout('wait();',500);
  }
}
</script>
</head>
<body><h1>Pictures + animation</h1>
<p><button name="exec" onclick="javascript:anim();">Animate (popup)</button></p>
<p><img src="img1.jpg"></p>
....
<p><img src="img16.jpg"></p>
</body>
</html>

Я напечатал/адаптировал это для релевантности; Надеюсь, я не сделал опечаток...

Я работаю с Iceweasel Debian Etch (ребрендинг Firefox 2.x); Я не пробовал это с другими браузерами. В Iceweasel происходит следующее:

  1. Всплывающее окно появляется, как и должно быть, но кажется, что цикл идет прямо к последней картинке. setTimeout, похоже, не влияет на «паузу» между изображениями.
  2. Отображается последнее изображение, а в строке состояния всплывающего окна отображается индикатор выполнения на полпути, предполагая, что что-то загружается.

Итак, мои вопросы:

  1. Как именно я должен использовать вызов setTimeout здесь? Я попытался заставить его вызывать «пустую» функцию, поэтому она работает как «пауза» в цикле с setTimeout(), где цикл обновляет одно всплывающее изображение из массива изображений главного окна.
  2. Я обнаружил, что если я загружаю всплывающее окно, загружая HTML-код из внешнего файла (anim.html), строка состояния, кажется, показывает из «индикатора выполнения», что окно продолжает ожидать перезагрузки. Я все еще собираюсь попробовать, если это откуда-то еще, но что я хочу знать, важно/актуально ли, чтобы я загружал HTML-страницу из внешнего файла с помощью window.open(), а не загружал пустое окно и делал запись в него "написать" HTML.
  3. Я прокомментировал while(true) в цикле, потому что иначе браузер перестает отвечать, и компьютер переходит на 100% CPU. Я мог бы сделать if в цикле for, чтобы обнулить счетчик перед последним элементом, но есть ли другой "элегантный" или "более подходящий" способ сделать этот цикл бесконечным - или while(true) отлично справляется?

Я заранее ценю ваши комментарии и, если возможно, ссылку на существующую библиографию, описывающую аналогичные решения.


javascript image timeout popup cycle
person jbatista    schedule 28.03.2009    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Я не думаю, что это означает то, что вы думаете:

timeout=setTimeout('wait();',500);

Судя по всему, вы пытаетесь sleep() с этим. тайм-ауты в JS работают иначе — это происходит onclick в вашем коде: вы прокручивать массив изображений, сразу переключать изображения с 0-го на 1-е... на последнее; также при каждом переключении вы говорите "запустить функцию wait() через 500 мс".

window.setTimeout(foo,bar,baz) делает следующее: устанавливает таймер на bar миллисекунд и возвращает результат. Выполнение кода продолжается со следующего оператора. Через bar миллисекунд автоматически вызывается функция foo(baz). 3-й и последующие аргументы для setTimeout являются необязательными и будут переданы функции в 1-м аргументе.

Что вы можете сделать:

function anim() { 
  var timeout; var next;
  var popuptitle='Movie';
  var main=parent;
  var popup=parent.open("","",
      "width="+main.document.images[0].width+",height="+
      (main.document.images[0].height+40)+
      "toolbar=no,location=no,directories=no,status=no,"+
      "menubar=no,scrollbars=no,copyhistory=no,resizable=no");
  popup.document.write('<html><head><title>'+popuptitle+
    '</title></head><body>'+
    '<p align="center"><img name="anim" width="100%" alt=""></p>'+
    '<p align="center"><button name="close" ' + 
    'onclick="javascript:window.close();">Close</button></p>'+
    '</body></html>');

  // *changed below*
  // start the animation with the 0th image
  next_image(0,main.document.images,popup.document.images[0]);
}

function next_image(index,source_image_array,target_image) {
    // if not at end of array
    if (source_image_array.length < index) { 
        next=source_image_array[index].src;
        target_image.src=next;

        // do this again in 500 ms with next image
        window.setTimeout(next_image,500, index+1 ,
                            source_image_array,target_image);
    }
}

Таким образом, в конце вашей функции anim() вы вызываете next_image(0), который устанавливает изображение на 0-е место в массиве и устанавливает таймер для вызова next_image(1) через 500 мс; когда это произойдет, изображение будет установлено на 1-е, а таймер будет настроен на вызов next_image(2) еще через 500 мс и так далее, пока в массиве больше не останется изображений.

person Piskvor left the building    schedule 28.03.2009

arrow_upward
1
arrow_downward

Это не прямой ответ на ваш вопрос, но с помощью JavaScript-фреймворка jQuery и plugin, вы можете легко создавать слайд-шоу изображений. Я думаю, это здорово, что вы хотите изучать JavaScript с нуля, но переход по пути jQuery + плагин может сэкономить вам много-много часов. Черт возьми, даже если вы хотите сделать все своими руками, я бы все равно рекомендовал использовать jQuery, потому что он значительно упрощает манипуляции с DOM.

person BeefTurkey    schedule 28.03.2009

arrow_upward
0
arrow_downward

To Piskvor: Спасибо за ответ, это именно то, что мне нужно было знать:

setTimeout(foo,bar,baz) делает следующее: устанавливает таймер на bar миллисекунды и возвращает результат. Выполнение кода продолжается со следующего оператора. Через bar миллисекунд автоматически вызывается функция foo(baz). 3-й и последующие аргументы для setTimeout являются необязательными и будут переданы в функцию в качестве 1-го аргумента.

Итак, здесь следует исправленный пример; Надеюсь, это поможет другим гуглерам ;-)

<html>
<head>
<script language="javascript">
function display(img,i, popup) {
  var next; var after_ms=750; var max=img.length;
  if(i>=max) i=0;  /* so we can cycle infinitely */
  next=img[i].src; popup.document.images[0].src=next;
  setTimeout(display,(i+1<max?after_ms:4*after_ms), img,i+1,popup);
}
function anim() {
  var popuptitle='Movie';
  var popup_properties="width="+document.images[0].width+
      ",height="+(document.images[0].height+40)+
      ",toolbar=no,location=no,directories=no,status=no"+
      ",menubar=no,scrollbars=no,copyhistory=no,resizable=no"
  var popup=parent.open("", popuptitle, popup_properties);
  popup.document.write('<html><head><title>'+popuptitle+'</title></head><body>'+
    '<p align="center"><img name="anim" width="100%" alt=""></p>'+
    '<p align="center"><button name="close" onclick="javascript:window.close();">Close</button></p>'+
    '</body></html>');
  display(document.images,0, popup);
}
</script>
</head>
<body><h1>Pictures + animation</h1>
<p><button name="exec" onclick="javascript:anim();">Animate (popup)</button></p>
<p><img name="1"  src="img1.jpg"></p>
// .... 
<p><img name="16" src="img16.jpg"></p>
</body>
</html>

Что я также узнал:

  1. while(true) это зло, браузер зависает. Вместо этого я использовал условие в функции anim(), которое устанавливает индекс обратно в ноль, когда он достигает конца.
person jbatista    schedule 28.03.2009