如何在Rails 3任务执行时展示一个酷炫的加载屏幕？

本文共计500个文字，预计阅读时间需要2分钟。

为了在用户执行操作时显示最佳的加载屏幕，可以使用以下方法，并结合一些AJAX魔术技巧：

1. 使用AJAX异步请求： - 当用户开始操作（如点击按钮或提交表单）时，使用AJAX发送请求到服务器。 - 请求可以是GET或POST，取决于你需要的数据和操作。

2. 在发送请求前显示加载图像： - 在AJAX请求发送之前，立即在页面上显示一个加载图像或进度条。 - 这可以通过简单的HTML和CSS实现，例如：

css #loading-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; }

3. 隐藏加载图像： - 在AJAX请求完成（无论成功还是失败）后，隐藏加载图像。

javascript document.getElementById('loading-screen').style.display='none';

4. AJAX示例代码：

javascript document.getElementById('myButton').addEventListener('click', function() { var xhr=new XMLHttpRequest(); xhr.open('GET', 'api/endpoint', true); xhr.onreadystatechange=function() { if (xhr.readyState===4 && xhr.status===200) { // 处理响应数据 document.getElementById('loading-screen').style.display='none'; } }; xhr.send(); });

通过这种方式，用户在操作过程中会看到一个明确的加载提示，从而提高用户体验。

如果我的“创建”操作需要一段时间才能加载(由于进行API调用然后进行计算),在后台执行此任务时,向用户显示“加载屏幕”的最佳方法是什么？ 写一些 AJAX魔术;)激活时显示加载图像,并在AJAX调用完成后隐藏它.如果你不想使用AJAX,嗯,你可以看看这个：

yehudakatz.com/2010/09/07/automatic-flushing-the-rails-3-1-plan/

那里还有一颗宝石,有点像那样.
但我对此没有任何经验.
我会去AJAX方法=)

编辑：

是的,你应该在jQuery中用AJAX调用create动作.你可以这样做：

function create() { $('#loading_image').show(); $.ajax({ type: 'POST', url: /* URL to your create action: e.g. '/user/create/' */, data: $('form').serialize(), success: createSuccessHandler, error: createErrorHandler, complete: hideLoadingImage }); } function createSuccessHandler(data) { alert("User created!") } function createErrorHandler(data) { alert("It failed, ffs!") } function hideLoadingImage() { $('#loading_image').hide() }