javascript非阻塞图像加载？

发布于 2024-10-20 12:14:29 字数 388 浏览 2 评论 0原文

这个函数每 30 毫秒调用一次

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

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

，一些鼠标事件会修改 displayme.src 和绘图位置，

但是当加载新的 src 时，所有其他 javascript 都会被阻止并且无法移动（之前加载的）图像

我也尝试过使用不同的图像对象并将其分配给“displayme”，但它不起作用

任何帮助将是最受欢迎的

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

野生奥特曼 2024-10-27 12:14:29

AFAIK 所有浏览器都在单个线程中运行 javascript。您可以使用 setTimeout() 使该函数立即返回，但在该函数实际运行时，浏览器不会在页面上运行任何其他 JavaScript。这模拟了多线程，但不应将其误认为是真实的。

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

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

回复收藏 0 原文

~没有更多了~