neue Seite langsam einfaden und automatisch ausfade lassen?

  • Guten Tag,

    ich habe zwei Fragen. Eine vielleicht leichte und eine knackige. :D

    1
    Ich meine mal gelesen zu haben, dass wenn man eine neue Seite lädt, man bestimmen kann wie schnell diese eingeblendet wird.
    I.d.R. geht das ja in einer gefühlten Millisekunde.
    Kann ich den Übergang nicht auch langsamer gestalten?
    Ich klicke also auf einen Link und die neue Seite öffnet sich im selben Fenster ganz langsam, so dass man vielleicht in der mitte der Aktion die Ursprungs- und die neue Seite mit je 50% Deckkraft sieht

    2
    Gibt es eine Möglichkeit folgendes zu realisieren:
    Ich klicke auf einen Link. Eine neue Seite öffnet sich im selben Fenster.
    Auf dieser neuen Seite ist eine jquery Slideshow programmiert. Diese geht ungefähr 20 sekunden. (das funktioniert bereits alles)
    Aber, gibt es eine Möglichkeit, dass nach der Slideshow automatisch wieder auf die Ursprungsseite zurückgesprungen wird.
    Der User also nicht auf einen zurück Button klicken muss, sondern der Verweis automatisch geschieht?

    Wäre für jeden Hinweis sehr dankbar!
    Mit besten Grüßen
    Markus

  • ja, du kannst mit window.setTimeout() einiges machen

    Code
    function goTo(where) {
        $(document).fadeOut(1000);
        window.setTimeout("location.href='"+where+"';", 1000);
    }
    window.setTimeout("goTo('"+document.referrer+"');", 20000);
    // Die 20.000 für 20.000 Millisekunden = 20 Sekunden

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

  • Hey Tobse,

    danke für den Hinweis.
    Ich habe es grad mal ausprobiert.

    Leider bin ich noch nicht so JS konform.

    Wenn ich den Code so 1zu1 übernehme und einbette, dann funktioniert der Abbruch der Seitenanzeige optimal. Jedoch bekomme ich eine Fehlermeldung, anstatt das die Ursprungsseite aufgerufen wird.

    ich habe diese Varianten probiert, jedoch ohne Erfolg:
    Kannst du mir sagen, wie ich die Begriffe:
    +where+
    und
    +document.referrer+

    interpretieren muss?


    <script type="text/javascript">
    function goTo(where) {
    $(document).fadeOut(1000);
    window.setTimeout("location.href='"+where+"';", 1000);
    }
    window.setTimeout("goTo('"javascript:history.back()"');", 17000);
    // Die 20.000 für 20.000 Millisekunden = 20 Sekunden
    </script>

    <script type="text/javascript">
    function goTo(where) {
    $(document).fadeOut(1000);
    window.setTimeout("location.href='"+where+"';", 1000);
    }
    window.setTimeout("goTo('"ursprungsseite.html"');", 17000);
    // Die 20.000 für 20.000 Millisekunden = 20 Sekunden
    </script>

  • Welche Fehlermeldung kommt denn?
    Also das mit dem where und document.referrer ist so:
    das (where) ist ein Wert, den du der Funktion goTo übergeben kannst, diese wird dann nach dorthin weiterleiten, nachem die Seite eine Sekunde ausgefadet hat.
    im window.setTimeout(); kannst du einen String übergeben, welche den befehl enthält, also z.B.
    die Variable document.refferer enthält die zuletzt besuchte Seite. Das geht aber auch mit histroy.back(-1); (Geht im Browserverlauf einen Schritt nach hinten)
    loaction.href="irgendwo.html";
    Da der String aber von " begrenzt wird, brauchen wir '
    "location.href='" - So jetzt haben wir hier den String location.href='
    an den hängen wir jetzt (immernoch mit " begrenz) document.referrer an
    "location.href='"+document.referrer;
    also haben wir (z.B.) location.href='uhrsprungsseite.html
    aber um nun den "inneren" String wieder zu schliessen, brauchen wir noch ein '
    "location.href='"+document.refferer+"';";
    also dann im ganzen location.href='uhrsprungsseite.html';
    (Stelle dir jetzt am beispiel hier oben document.refferer als where vor)
    Diesen String übergeben wir dann an window.setTiemout(), was diesen in 1000 Millisekunden ausführt.
    So Sollte es aber auch gehen

    Code
    // Jetzt den alten weg und nur diesen
    window.setTimeout(function() {
        $(document).fadeOut(1000);
        window.setTimeout("history.back(-1);", 1000);
    }, 20000);
    // Mach dir mal jetzt um den Syntax hier kein Kopf

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

  • Hey Tobse,

    herzlichen Dank für die ausführliche erklärung.
    Ich habe es nun neu ausprobiert und es funktioniert ganz wunderbar!

    Bis auf die Sache mit dem Einfaden. Egal ob 1000, 5000 oder gar 10000.
    Die neue Seite wird immer ganz schnell geladen und wenn die Seite dann auf die Ursprungsseite zurück geht, geschieht dies auch ebenfalls im sekundenbruchteil.
    Da kann ich die Syntax verändern wie ich will.

    Woran könnte das denn liegen?

  • Da ist man um jedes Byte, das schneller durch die Leitung kommt, froh und dann bremsen manche die Sache wieder aus. :(

  • am laden der anderen Seite kannst du nix ändern. Du könntest dann natürlich so machen:

    Code
    [FONT=monospace]window.setTimeout(function({    
        $(document).fadeOut(1000);
        window.setTimeout(function() {
             $(document).load(document.refferer);
             $(document).fadeIn(1000);
        }, 1000);
    }, 20000);
    [/FONT]


    Aber an dieser Stelle sind benutzer ohne JS extrem benachteiligt.

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

  • Sorry,

    der neue Code funktioniert bei mir nicht :(
    Ich habe den alten überschrieben um zu sehen ob das faden jetzt klappt.
    Jedoch fadet die neue Seite immer noch genau so schnell ein und aus wie davor.

    Den Code muss ich ja nur in die Zielseite schreiben. Die Ursprungsseite bleibt ja Jungfräulich, richtig?!

    Das mit dem JS sehe ich nicht so kritisch. Den einzigen Nachteil den die Besucher haben wäre ein sehr schneller Bildaufbau und das sie nicht automatisch zurückgeleitet werden.
    Ich habe ja alternativ noch einen Link mit dem man wieder zurück kommt. :)

    Könntest du denn bitte noch einmal schauen, woran der Fehler liegen könnte?

    1. Code:
    Zurück auf die Ursprungsseite nach bestimmter Zeitangabe erfolgt problemlos
    Nur das Ein- und Ausfaden fehlt.





    2. Code
    Funktioniert bei mir weder das ein noch das andere

    2 Mal editiert, zuletzt von cellardoor (15. März 2010 um 20:47)

  • Code
    window.setTimeout(function(){    
              $(document).fadeOut(800);
          window.setTimeout(function() {
              $(document).load(document.refferer);
              $(document).fadeIn(800);
          }, 900);
    }, 5000);


    Wo genau der fehler liegt kan nich nicht sagen. Aber das wäre die einzige möglichkeit, die Slideshow hinzufaden und am ende wieder wegzufaden

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

  • :(

    Der Code funzt bei mir leider auch nicht.

    Schade, die Funktion von der ich dachte sie sei am schwierigsten realisierbar ist jetzt kein Problem und die wohl irrtümlich angenommene einfache Funktion stellt sich jetzt als Stolperstein heraus. :(


    Hat vielleicht noch jemand eine Idee was man versuchen könnte?

  • Ich habs nicht getestet. Aber probier mal Str+Umschalt+J und dort unter Fehler, müsste aufschlussreich sein.

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!