解决Eel中Python长时间运行导致前端图片加载延迟的问题-js教程-PHP中文网

解决Eel中Python长时间运行导致前端图片加载延迟的问题

花韻仙語

发布： 2025-10-02 19:15:20

原创

864人浏览过

解决eel中python长时间运行导致前端图片加载延迟的问题

在使用Eel将Python与前端结合时，经常会遇到一个问题：当Python函数执行时间较长时，前端的图片或其他元素无法及时加载，直到Python函数执行完毕后才会显示。这严重影响了用户体验，因为用户需要等待较长时间才能看到结果。

问题分析

问题的根源在于Eel的运行机制。当JavaScript调用Python函数时，实际上是向一个WSGI服务器发送请求。WSGI服务器会等待Python函数执行完毕并返回结果后，才会将响应发送回前端。因此，如果Python函数执行时间过长，前端就会一直处于等待状态，无法及时更新UI。

在提供的代码示例中，generate()函数包含了耗时的操作，并且在执行完eel.set_image()后，仍然有代码需要执行。这导致前端需要等待整个generate()函数执行完毕才能看到图片。

立即学习“Python免费学习笔记（深入）”；

解决方案：使用Celery异步任务队列

解决这个问题的一种有效方法是使用Celery，一个强大的Python异步任务队列。Celery可以将耗时的任务放入后台执行，从而避免阻塞主线程，让前端能够及时响应。

步骤 1：安装 Celery 和 Redis

Celery需要一个消息中间件来传递任务，这里我们选择Redis。

pip install celery redis

登录后复制

步骤 2：创建 Celery 任务

创建一个celery.py文件，配置Celery：

一览运营宝

一览“运营宝”是一款搭载AIGC的视频创作赋能及变现工具，由深耕视频行业18年的一览科技研发推出。

查看详情

# celery.py
from celery import Celery

# 配置 Redis 作为消息中间件
celery = Celery('my_app', broker='redis://localhost:6379/0')

@celery.task
def long_running_task(source, keyword):
    # 耗时操作，例如图像处理、数据分析等
    # ...
    import time
    time.sleep(5) # 模拟耗时操作
    return "Task Completed"

登录后复制

步骤 3：修改 Python 代码

修改原有的Python代码，将耗时操作放入Celery任务中：

import eel
from celery import Celery
from .celery import long_running_task # 假设 celery.py 文件位于同一目录下

@eel.expose
def generate(source, keyword):
    # 立即调用 set_image()
    eel.set_image()
    # 将耗时操作放入 Celery 任务
    long_running_task.delay(source, keyword)

    return "Task Started" # 立即返回，不阻塞主线程

登录后复制

步骤 4：启动 Celery Worker

在终端中启动 Celery worker：

celery -A celery_app worker -l info # 假设 celery.py 文件名为 celery_app.py

登录后复制

步骤 5：修改 JavaScript 代码

JavaScript代码不需要修改，因为eel.set_image()会被立即调用，前端会立即显示图片。

eel.expose(set_image);

function set_image() {
    document.getElementById("zoom-animate").innerHTML = '<img src="temp.png">';
}



function generate() {
    let source = document.getElementById("source").value;
    let keyword = document.getElementById("keyword").value;
    eel.generate(source, keyword);
}

登录后复制

代码解释

long_running_task.delay(source, keyword)：这会将long_running_task任务放入Celery队列中，由Celery worker在后台执行。.delay()是.apply_async()的简写形式。
return "Task Started"：generate()函数立即返回，不会阻塞主线程，前端可以及时更新UI。

注意事项