javascript non-blocking image loading?

this function is called every 30ms

function draw(){
    context.clearRect(0, 0,canvas.width, canvas.height);

    context.drawImage(displayme, plot.position.x, plot.position.y, plot.width, plot.height);    
}

and some mouse even开发者_如何学Gots modify the displayme.src and plot position

but when the new src is being loaded, all the other javascript gets blocked and cant move the (previously loaded) image

i've also tried using a different Image object and assigning it to "displayme" but it didn't work

any help would be most welcome

AFAIK all browsers run javascript in a single thread. You can, using setTimeout() make it so this function returns immediately, but at the time that the function actually runs the browser won't be running any other javascript on the page. This simulates multithreading, but it shouldn't be mistaken for the real thing.

function draw(){
    // allows immediate return and "schedules" the anonymous function next
    setTimeout( function() {
        context.clearRect(0, 0,canvas.width, canvas.height);
        context.drawImage(displayme, plot.position.x, plot.position.y,
                                     plot.width, plot.height);
    },0);
 }