Question

大家好我是jquery的新手，我只是在我的rails应用程序中设置了一些AJAX页面加载。到目前为止，我有一个菜单，使用AJAX在容器div中加载不同的请求。但是，当我单击一个链接以在div中加载新页面时，有一个延迟，我仍然在新页面加载之前查看旧页面。

我在其他地方看到人们使用旋转轮动画来表示加载，这是一个示例网站，当您点击“显示备注”“评论”或“类似剧集”链接http://railscasts.com/episodes/164-cron-in-ruby-revised

感谢您的帮助！

编辑：有关更多rails网站的更多详细信息。

根页面有一个容器div，默认情况下包含一个对象数组。

然后我有一个加载ajax请求的菜单，并用结果替换div.stream的内容。

这意味着我不能让div.stream包含默认的'Loading please wait message'

Answer 1

您需要使用position：absolute在div上显示一个GIF图像，并在发出AJAX请求之前显示div并在AJAX请求完成时隐藏它。

以下是JSFiddle的实例，我正在使用“setTimeout”来模拟3秒长的AJAX请求。

Answer 2

这很简单。只有aimage在容器潜水中显示，并在准备就绪时被ajax响应取代。

你有容器div来显示内容。

默认情况下显示加载类似

的动画图像

<div id="container" >
    <img src="ajax-loader.gif" alt="Loading" />
</div>

随着内容提取过程的完成以及您的Html到内容已准备就绪

将div内部HTML替换为页面内容。

<div id="container" >
   Replace image with Page content after fetching data ajax/jquery response
</div>

您还可以使用如下的ajaxStart / Stop函数：

$('#loadingDiv')
    .hide()  
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;
<div id="loading" style="display:none;">
    Loading Please Wait....
    <img src="ajax-loader.gif" alt="Loading" />
</div>

Rails / Jquery：加载页面时如何看到旋转轮？

2 个答案: