javascript non-blocking image loading?

Question

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 events 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

tvanfosson · Accepted Answer · 2011-03-04 18:29:03Z

3

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);
 }

answered Mar 4, 2011 at 18:29

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Improper Over a year ago

awesome it worked, thanks I still had to do the "placeholder" object var displayme = new Image(); var img = new Image(); img.onload = function(){ displayme.src = img.src; }

Collectives™ on Stack Overflow

javascript non-blocking image loading?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related