2012-04-01 22 views
4

Ich entwickle ein Skript, in dem der Benutzer eine Reihe von Daten auswählt, und dann hole ich ein paar Bilder (über 150) vom Server und dann habe ich Schleife Trog ihnen etwas zu machen, wie ein Film. Was ich wissen möchte, ist der effizienteste Weg, Verzögerungen beim Verschieben durch die Bilder zu verhindern.schnelle Laden von vielen Bildern auf HTML

Derzeit bin ich hole die Bilder vom Server mit Ajax und speichern sie in einem Array von Bildobjekten auf dem JavaScript. Im HTML habe ich ein div-Tag, in das ich die Bilder einfügen möchte. Nachdem ich alle Image-Objekt fertig zu schaffen (und ihre richtige src Einstellung) in der Anordnung, ich folgendes tun:

imgElem = document.createElement('img'); 
document.getElementById('loopLocation').appendChild(imgElem); 
imgElem.src = images[0].src; 

Danach mache ich gerade das letzte Gespräch, aber die Schleife Index ändern. Ich mache das alle 400ms. Die Schleife funktioniert, aber manchmal hinkt sie und es friert länger auf einem Bild ein, als es sein sollte. Ich möchte wissen, ob ich in der Lage bin, dies von der Client-Seite aus zu verbessern, oder ich brauche nur einen Server, der schneller reagiert.

+0

Hm, wie wäre es, alle Bilder Vorbelastung Bevor Sie beginnen, sie in einer Schleife zeigt? oder ist das aus irgendeinem grund keine option? – Raine

+0

Ich lege sie auf das Array, bevor sie angezeigt werden. – Sednus

+1

Ja, siehe den unten stehenden Link. Es gibt eine Möglichkeit, das Skript auszuführen, nachdem alle Bilder erfolgreich in den Cache des Browsers geladen wurden. Dadurch kann die Schleife sie nicht "on the fly" laden – Raine

Antwort

6

Sie vielleicht wollen spriting betrachten, die alle Bilder in einem großen Bild setzt. Dazu müssen Sie nur ein großes Bild laden und dann für jede Szene neu positionieren.

oder könnten Sie auch diese 150 Bilder vorab geladen werden sollen, bevor sie tatsächlich verwenden. Sie können ein JS-Array verwenden, um Image-Objekte zu speichern, und dann das Array durchlaufen, um Ihre Bilder zu erhalten.

var images = []; 
var expectLoaded = 150; 

for(var i = 0; i<expectLoaded;i++){ 
    (function(i){ 

     //new image object 
     var img = new Image(); 

     //onload hander 
     img.onload = function(){ 

      //after load, push it into the array 
      images.push[img]; 

      //and check if the all has loaded 
      if(images.length === expectLoaded){ 
       //preload done 
      } 
     } 

     //start loading this image 
     img.src = //path to image[i]; 

    },(i)); 
} 

Schleifen blockieren die UI-Thread. JS ist single-threaded, was bedeutet, dass Code linear nacheinander ausgeführt wird. alles, was nach dieser Schleifenanweisung kommt, wartet bis die Schleife beendet ist. Wenn diese Schleife lange dauert ... schnappen Sie sich einen Kaffee. Außerdem, da Sie das DOM manipulieren, können Sie die Änderungen nicht sehen, da der UI-Thread blockiert ist.

aber es gibt Möglichkeiten, um dies zu umgehen, und einer von ihnen wird Timeouts mit dem Code für die spätere Ausführung zu verzögern und Warteschlange, wenn JS nicht ausgelastet ist.

function animate(frameNo){ 

    //animate frame[frameNo]; 

    if(frameNo < total_frames){ //make the UI breate in between frames 
     setTimeout(function(){ //so that changes reflect on the screen 
      animate(++frameNo); //then animate next frame 
     },200);     
    } 
} 

//start 
animate(0); 
+1

Ich habe sie vorher geladen. – Sednus

+1

so haben Sie Bilder, das Problem ist Framerate? – Joseph

+1

hmm, ein bisschen wie ein Spritesheet –

Verwandte Themen