Leinwand Bild von Code darunter

Question

Hallo blockiert ziehen Ich habe eine folgende Funktion

render = function (ctx, img, W, H) { 
    ctx.drawImage(img, 0, 0, W, H, 0, 0, W, H); 
} 

ich von einer anderen Funktion

renderImage(ctx, img, width, height); 
for(var i = 0; i < 10000000 ; i++) { 
    // en expensive for loop 
}    

Das Problem der Funktion nenne ich das Bild bin vor nicht geladen im Browser, bis die for-Schleife die Ausführung beendet, jedoch ist nicht klar, warum das Bild warten soll, bis die for-Schleife beendet ist. Jeder kann helfen? Wie kann ich es laden, ohne auf die Ausführung der Schleife zu warten?

Answer 1

JavaScript ist single threaded damit der Browser von der Aktualisierung des Bildschirms verhindert wird, während die Schleife läuft.

Um zu lösen geben Sie dem Browser einen Moment zum Atmen mit einer Verzögerung. Dies führt natürlich dazu, dass der Code asynchron läuft, so dass möglicherweise ein Callback-Mechanismus erforderlich ist, abhängig von der nächsten Bewegung des Codes.

Beispiel:

renderImage(ctx, img, width, height); 

setTimeout(function() { 
    for(var i = 0; i < 10000000 ; i++) { 
    // en expensive for loop 
    } 
    // call next step 
}, 9); // delay some arbitrary ms 

Wenn die Schleife lang andauernde Sie in mehrere Segmente aufzuteilen, um es in Erwägung ziehen könnte oder eine WebWorker verwenden.

Sehen Sie diese Antworten, wie die Schleife zu spalten:

• Why is this for loop blocking if it is called afterwards?
• Converting Uint8Array crashing browser for large files

Bonus-Tipp: Sie müssen nicht die Clipping-Parameter verwenden, um eine Größe geänderte Bild zu zeichnen, nur Breite und Höhe angeben:

ctx.drawImage(img, 0, 0, W, H); 

Answer 2

Haben Sie versucht, zuerst das Bild zu laden und dann zu zeichnen?

var img = new Image(); 
var i = 0; 
img.onload = function(){ 
    //draw... 
    animate(); 
}; 
img.src = 'source.jpg'; 
function animate(){ 
    if(i<10000000) { 
     requestAnimationFrame(animate); 
     render(); 
    } 
} 

function render(){ 
    //draw 
}