Javascript: Popup mit Film von Bildern in Hauptfenster

https://stackoverflow.com/questions/692557

22-08-2019
|

Frage

Ich bin ein meist-Neuling Javascript'er und ich versuche, es auf einer Webseite, die auf Knopfdruck, ein Fenster öffnet dich, das einen zyklischen „Film“ mit den Bildern aus dem Hauptfenster zeigt. Von dem, was ich habe versucht Googeln um kann ich spüre ich ziemlich nah dran bin, aber mir etwas entziehen.

Ich weiß, was Ergebnisse in zwei separate Fragen folgt, die zwei getrennte Beiträge verdienen. Aber ich glaube, da beide mit dem gleichen Problem / Ziel verknüpft sind, vielleicht gehört dies in einer einzigen (wenn auch lang) Post. Ich hoffe also, die Größe der es keine Menschen, enfuriate zu viel ...; -)

Wie auch immer, hier ist eine Momentaufnahme dessen, was ich denke, der entsprechende Code ist:

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

Ich tippte / angepasst dies für Relevanz; Ich hoffe, ich habe keine Fehler machen ...

Ich arbeite mit dem Debian Etch des Iceweasel (Firefox 2.x Rebranding); Ich habe nicht versucht, mit anderen Browsern. In Iceweasel, was passiert ist:

Das Popup zeigen, wie soll, aber es scheint der Zyklus gerade auf das letzte Bild geht. setTimeout scheint keine Wirkung in „Pausieren“ zwischen den Bildern zu haben.
Das letzte Bild wird angezeigt, und die Statusleiste zeigt die Popup-Mitte seiner Fortschrittsbalken, was darauf hindeutet, etwas geladen wird.

Also meine Fragen sind:

Wie genau soll ich hier den setTimeout Anruf benutzen? Ich habe versucht, er eine „leere“ Funktion zu machen rufen, so funktioniert sich als „Pause“ im Zyklus den setTimeout() mit, wo der Zyklus des Popup-Einzelbild-Updates aus dem Hauptfenster der Bilder-Array.
Ich finde, dass, wenn ich das Popup laden, indem Sie den HTML-Code aus einer externen Datei (anim.html) geladen, die Statusbar von den „Fortschrittsbalken“ scheint zu zeigen, dass das Fenster hält einen Reload erwartet. Ich werde immer noch versuchen, wenn es von woanders ist, aber was ich möchte wissen, ob es wichtig / relevant ist, dass ich die HTML-Seite aus einer externen Datei mit dem window.open() laden, gegen ein leeres Fenster geladen und eine writeln, um es zu tun der HTML-Code zu "schreiben".
Ich habe die while(true) im Zyklus kommentiert, weil sonst der Browser nicht mehr reagiert und der Computer geht zu 100% CPU. Ich kann eine if im for Zyklus mache die Zähler wieder auf Null vor dem letzten Punkt zu setzen, aber gibt es eine anderen „elegant“ oder „angemessenere“ Weg, dies eine unendliche Zyklus zu machen - oder hat die while(true) ganz gut tun?

I appretiate Ihre Kommentare im Voraus und wenn möglich einen Zeiger auf bestehende Bibliographie beschreibt ähnliche Lösungen.

Lösung

Ich glaube nicht, bedeutet dies, was Sie denken, es bedeutet:

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

Anscheinend Sie versuchen, mit diesem sleep(). Das ist nicht, wie die JS Timeouts Arbeit - dies geschieht onclick in Ihrem Code: Sie Schleife durch die Bilder Array sofort wechseln Bilder von 0. bis 1. ... zu halten; auch, auf jedem Schalter, sagen Sie "ausführen, um die wait() Funktion, 500 ms ab jetzt".

window.setTimeout(foo,bar,baz) tut dies: es setzt einen Timer für bar Millisekunden und kehrt zurück. Codeausführung wird mit der nächsten Anweisung. Nach bar Millisekunden wird Funktion foo(baz) automagically genannt. Die dritten und folgenden Argumente für setTimeout sind optional und werden auf die Funktion in dem 1. Argumente übergeben werden.

Was Sie tun können:

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

Auf diese Weise am Ende Ihrer anim() Funktion, rufen Sie next_image(0), die das Bild auf die 0-ten in Reihe setzen und setzt einen Timer next_image(1) in 500 ms zu nennen; wenn das geschieht, wird das Bild auf den ersten und ein Timer next_image(2) in weiteren 500 ms, und so weiter nennen wird gesetzt werden, bis es keine weiteren Bilder in der Anordnung sind.

Andere Tipps

Dies ist keine direkte Antwort auf Ihre Frage, aber durch den JavaScript-Framework jQuery und ein Plugin , können Sie leicht ein Bild Diashow haben. Ich denke, es ist toll, dass Sie JavaScript aus dem Gelände bis lernen wollen, aber die jQuery + Plugin Weg gehen können Sie viele, viele Stunden sparen. Heck, auch wenn Sie DIY wollen, würde ich immer noch mit jQuery empfehlen, weil es Manipulation DOM macht so viel einfacher.

Um Piskvor: Vielen Dank für Ihre Antwort, das ist genau das, was ich wissen musste:

setTimeout(foo,bar,baz) tut dies: es setzt einen Timer für bar Millisekunden und kehrt zurück. Codeausführung wird mit der nächsten Anweisung. Nach bar Millisekunden wird Funktion foo(baz) automagically genannt. Die dritten und folgenden Argumente für setTimeout sind optional und werden auf die Funktion in dem 1. Argumente übergeben werden.

So, hier folgt die korrigierte Beispiel; Ich hoffe, dass es andere Googler hilft; -)

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

Was ich habe auch gelernt:

Die while(true) ist böse, es macht der Browser hängen. Stattdessen habe ich eine Bedingung in der anim() Funktion verwendet, die den Index wieder auf Null setzt, wenn er das Ende erreicht hat.

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow