Django静态加载GIF不显示及ConnectionResetError问题求助

看起来你遇到了两个关联的问题：加载GIF无法正常显示，以及服务器端抛出的连接重置错误。咱们一步步来解决它们：

一、修复加载GIF不显示的问题 #

1. 先确认静态URL是否正确渲染 #

打开浏览器开发者工具（按F12），查看页面源码里ShowLoading函数中的img.src值。Django的{% static %}标签应该被渲染成实际的静态文件路径（比如/static/img/loading.gif）。如果显示的还是模板标签本身，那说明标签没被解析——不过你提到脚本和表单位于同一HTML文件且已加载{% load static %}，这种情况概率很低，但还是先确认一下。

2. 调整元素创建逻辑 #

你当前的代码先设置div.innerHTML = "Processing..."，再追加img元素，可能导致GIF的显示被干扰，或者样式上出现问题。另外，给元素补充基础样式能让加载状态更清晰：

function ShowLoading() {
    var div = document.createElement('div');
    // 创建文本节点替代innerHTML，避免潜在解析问题
    var textNode = document.createTextNode("Processing...");
    var img = document.createElement('img');
    img.src = "{% static 'img/loading.gif' %}";
    // 给GIF添加样式，确保它能正常展示
    img.style.cssText = 'display: block; margin: 10px auto; width: 50px; height: 50px;';
    // 优化加载容器样式，提升可读性
    div.style.cssText = `
        position: fixed; 
        top: 10%; 
        left: 50%; 
        transform: translateX(-50%); /* 更精准的居中方式 */
        z-index: 5000; 
        width: 422px; 
        text-align: center; 
        background: #106087; 
        border: 1px solid #000;
        color: white;
        padding: 20px;
    `;
    // 按顺序添加文本和GIF
    div.appendChild(textNode);
    div.appendChild(img);
    document.body.appendChild(div);
    return div; // 返回容器，方便后续移除
}

调整后，GIF应该能正常显示在提示文本下方。

二、解决ConnectionResetError问题 #

这个错误的根源是传统表单提交会立即刷新页面，浏览器在服务器还没处理完请求时就关闭了连接，导致服务器抛出ConnectionResetError。要解决这个问题，我们需要用AJAX提交表单，让页面保持加载状态直到处理完成：

1. 修改表单和提交逻辑 #

先给表单加一个ID，方便监听提交事件：

<form id="image-upload-form" method="post" enctype="multipart/form-data">
    <!-- 你的表单内容 -->
    <button type="submit">Submit</button>
</form>

然后替换原来的onsubmit绑定，改用AJAX提交：

// 监听表单提交事件
document.getElementById('image-upload-form').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止默认的页面刷新行为
    var loadingDiv = ShowLoading(); // 显示加载动画
    
    // 构建表单数据
    var formData = new FormData(this);
    
    // 发送AJAX请求
    fetch(this.action, {
        method: this.method,
        body: formData,
        headers: {
            'X-CSRFToken': '{{ csrf_token }}' // 别忘了Django的CSRF令牌
        }
    })
    .then(response => {
        if (response.ok) {
            return response.json(); // 假设后端返回JSON，可根据实际调整
        }
        throw new Error('处理失败，请重试');
    })
    .then(data => {
        // 处理完成后移除加载动画，切换视图
        document.body.removeChild(loadingDiv);
        // 跳转到结果页面，替换成你的实际URL
        window.location.href = '/your-result-url/';
    })
    .catch(error => {
        // 处理错误
        document.body.removeChild(loadingDiv);
        alert(error.message);
    });
});

2. 后端视图调整 #

确保你的Django视图处理完图片后，返回一个JSON响应（比如包含结果页面的URL），而不是直接重定向：

from django.http import JsonResponse

def image_processing_view(request):
    if request.method == 'POST':
        # 图片处理逻辑
        # ...
        # 返回处理结果
        return JsonResponse({'success': True, 'redirect_url': '/result/'})

这样修改后，表单提交不会刷新页面，加载动画会一直显示到处理完成，服务器也不会再出现连接重置的错误。

内容的提问来源于stack exchange，提问作者raul