Ist es möglich, eine gesamte Webseite zu laden, bevor sie gerendert wird?

Question

Ich habe eine Webseite, die alle paar Sekunden automatisch neu geladen wird und ein zufälliges Bild anzeigt. Wenn sie neu lädt, gibt es jedoch für eine Sekunde eine leere Seite, dann lädt das Bild langsam. Ich möchte die ursprüngliche Seite weiterhin anzeigen, bis die nächste Seite in den Speicher des Browsers geladen ist und dann alles auf einmal anzeigen, sodass es wie eine nahtlose Diashow aussieht. Gibt es einen Weg, das zu tun?

Answer 1

Ist das einzige, was sich ändert, das Bild? Wenn ja, könnte es effizienter sein, etwas wie das Zyklus-Plugin für jQuery zu verwenden, anstatt die gesamte Seite neu zu laden.

http://malsup.com/jquery/cycle/

Hier ist der benötigte JS-Code, wenn Sie jQuery verwendet haben -

Sagen wir, das war Ihr HTML:

Hier wäre das benötigte jQuery:

$(function(){
$('div.pics').cycle();
});

Keine Notwendigkeit, sich um verschiedene Browser zu kümmern - vollständige browserübergreifende Kompatibilität.

Answer 2

Wenn Sie nur das Bild ändern, würde ich empfehlen, die Seite überhaupt nicht neu zu laden und stattdessen etwas Javascript zu verwenden, um einfach das Bild zu ändern. Dies könnte das sein, was das jQuery-Cycle-Plugin für Sie tut.

Jedenfalls hier ein einfaches Beispiel

var imageList = ["2.jpg", "3.jpg", "4.jpg"];
var listIndex = 0;

function changeImage(){
    document.getElementById('myImage').src = imageList[listIndex++];
    if(listIndex > imageList.length)
        listIndex = 0; // wieder von vorne beginnen.

    setTimeout(changeImage, 5000);
};

setTimeout(changeImage, 5000);

Dies ändert die Bildquelle alle 5 Sekunden. Leider lädt der Browser das Bild progressiv herunter, sodass es für einige Sekunden zu einem "Flackern" (oder vielleicht einer weißen Fläche) kommen kann, während das neue Bild heruntergeladen wird.

Um dies zu umgehen, können Sie das Bild "vorladen". Dies geschieht, indem ein neues temporäres Bild erstellt wird, das nicht auf dem Bildschirm angezeigt wird. Sobald dieses Bild geladen ist, setzen Sie das echte Bild auf dieselbe Quelle wie das "Vorladebild", sodass der Browser das Bild aus seinem Cache zieht und es sofort erscheint. Sie würden es so machen:

var imageList = ["2.jpg", "3.jpg", "4.jpg"];
var listIndex = 0;
var preloadImage = new Image();

// Wenn das Fake-Bild fertig geladen ist, ändern Sie das echte Bild
function changeImage(){
    document.getElementById('myImage').src = preloadImage.src;
    setTimeout(preChangeImage, 5000);
};  
preloadImage.onload = changeImage;

function preChangeImage(){
    // Lassen Sie unser Fake-Bild seine Quelle ändern
    preloadImage.src = imageList[listIndex++];
    if(listIndex > imageList.length)
        listIndex = 0; // wieder von vorne beginnen.
};

setTimeout(preChangeImage, 5000);

Das ist ziemlich kompliziert, aber ich überlasse es dem Leser als Übung, alle Teile zusammenzufügen (und hoffentlich "AHA!" zu sagen) :-)

Answer 3

Wenn Sie zwei DIVs erstellen, die im Bildbereich überlappen, können Sie eines über AJAX mit einem neuen Bild laden, das aktuelle DIV ausblenden und das mit dem neuen Bild anzeigen, ohne dass eine Aktualisierung der Webseite den "schlechten Übergang" verursacht. Wiederholen Sie dann den Vorgang.

Wenn es nur eine kleine Anzahl von Bildern gibt und sie immer in derselben Reihenfolge angezeigt werden, können Sie einfach ein animiertes GIF erstellen.

Answer 4

Zurück in den dunklen alten Tagen (2002) habe ich eine solche Situation bewältigt, indem ich ein unsichtbares iframe verwendet habe. Ich habe Inhalte darin geladen und im body.onload() Methode dann den Inhalt dorthin platziert, wo er hin sollte.

Vor AJAX war das eine ziemlich gute Lösung.

Ich erwähne das nur der Vollständigkeit halber. Ich empfehle es nicht, aber es ist erwähnenswert, dass Ajax keine Voraussetzung ist.

Das gesagt, in Ihrem Fall, wo Sie einfach ein Bild durchlaufen, verwenden Sie Ajax oder etwas Ähnliches wie das jQuery cycle plug-in, um Bilder dynamisch durchzulaufen, ohne die gesamte Seite neu zu laden.