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

Question

Ich habe eine Webseite, die automatisch alle paar Sekunden neu geladen wird und ein anderes zufälliges Bild anzeigt. Wenn sie neu geladen wird, ist die Seite jedoch eine Sekunde lang leer, dann wird das Bild langsam geladen. Ich möchte die ursprüngliche Seite so lange anzeigen, bis die nächste Seite in den Speicher des Browsers geladen ist, und dann alles auf einmal anzeigen, so dass es wie eine nahtlose Diashow aussieht. Gibt es eine Möglichkeit, dies zu tun?

Answer 1

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

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

Hier ist die JS benötigt, wenn Sie jQuery verwendet -

Sagen wir, das war Ihr HTML:

<div class="pics"> 
    <img src="images/beach1.jpg" width="200" height="200" /> 
    <img src="images/beach2.jpg" width="200" height="200" /> 
    <img src="images/beach3.jpg" width="200" height="200" /> 
</div> 

Hier wäre das benötigte jQuery:

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

Sie brauchen sich keine Gedanken über verschiedene Browser zu machen - vollständige Kompatibilität mit allen Browsern.

Answer 2

Wenn Sie nur das Bild ändern, dann würde ich vorschlagen, die Seite nicht neu zu laden, und mit einigen Javascript, um nur das Bild zu ändern. Dies kann sein, was das Jquery-Zyklus-Plugin für Sie tut.

Hier ist jedenfalls ein einfaches Beispiel

<img id="myImage" src="http://someserver/1.jpg" />

<script language="javascript">
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; // cycle around again.

    setTimeout(changeImage, 5000);
};

setTimeout(changeImage, 5000);
</script>

Dadurch wird die Bildquelle alle 5 Sekunden gewechselt. Leider lädt der Browser das Bild nach und nach herunter, so dass Sie für ein paar Sekunden ein "Flackern" (oder vielleicht eine weiße Fläche) sehen, während das neue Bild heruntergeladen wird.

Um dies zu umgehen, können Sie das Bild "vorladen". Dazu wird ein neues temporäres Bild erstellt, das nicht auf dem Bildschirm angezeigt wird. Sobald dieses Bild geladen ist, setzen Sie das echte Bild auf dieselbe Quelle wie das "Vorladen", so dass der Browser das Bild aus seinem Cache zieht und es sofort erscheint. Das geht dann so:

<img id="myImage" src="http://someserver/1.jpg" />

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

// when the fake image finishes loading, change the real image
function changeImage(){
    document.getElementById('myImage').src = preloadImage.src;
    setTimeout(preChangeImage, 5000);
};  
preloadImage.onload = changeImage;

function preChangeImage(){
    // tell our fake image to change it's source
    preloadImage.src = imageList[listIndex++];
    if(listIndex > imageList.length)
        listIndex = 0; // cycle around again.
};

setTimeout(preChangeImage, 5000);
</script>

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

Answer 3

Wenn Sie zwei Divs erstellen, die sich im Bildbereich überlappen, können Sie eines mit einem neuen Bild per AJAX laden, das aktuelle Div ausblenden und das mit dem neuen Bild anzeigen, ohne dass ein Aktualisieren der Webseite einen "schlechten Übergang" verursacht. Dann wiederholen Sie den Vorgang.

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

Answer 4

In den dunklen alten Tagen (2002) habe ich diese Art von Situation mit einem unsichtbaren iframe gelöst. Ich lud den Inhalt in ihn und in der body.onload()-Methode würde ich dann den Inhalt dort platzieren, wo er hingehört.

Vor AJAX war das eine ziemlich gute Lösung.

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

Das heißt, in Ihrem Fall, wo Sie einfach Zyklus ein Bild, verwenden Sie Ajax oder etwas wie die jQuery-Zyklus-Plug-in, um durch Bilder dynamisch ohne Neuladen der gesamten Seite.