javascript - 将 AJAX 加载程序附加到各个链接上的菜单/导航栏

Question

我在我们的网站上使用以下主题:http://themes.vivantdesigns.com/vpad/#dashboard.html

当用户单击左侧钻取菜单中的链接时，我希望 ajax 加载程序在链接/选项卡上显示“NEXT”。正如您从链接中看到的，内容是在以下位置动态加载的:

<section id="main-section">Pagename.html loaded here</section>

所以基本上，我希望 ajax 加载器显示在菜单链接的右侧，并在动态内容加载时消失。在演示链接上很难看到这种暂停，但较重的数据库查询会导致它在那里停留片刻，当然连接也会变慢。

非常感谢任何立即帮助。

我尝试过显示/隐藏 onClick 方法，在文档上隐藏类，但似乎没有任何效果。

Answer 1

好吧，经过一番努力寻找 ajax 发生的位置，我想我已经解决了(对 jQuery 不太熟悉/以前从未听说过 hashchange 或 bbq)，所以尝试一下吧。

假设您有权访问它，您引用的页面包含一个名为 global.js 的 JavaScript 文件。

在每个菜单项旁边添加一个最初隐藏的“加载”图像/div/其他内容，其 id 设置类似于菜单项的名称，例如id="mediaLoading"。

打开 global.js 并转到第 117 行:

$('#'+id).length && $('#'+id).remove();

在此行之后进行 ajax 调用，因此添加代码以显示 ajax 加载器，例如

var loaderId = h.replace(/^\#/, "") + "Loading";
document.getElementById(loaderId).style.display = 'block'; 
//or $("#" + loaderId).show() or whatever you would use in jQuery

最后，要重新隐藏它，请将类似的代码添加到内联“完整”函数中(现在位于第 127 行左右):

complete: function(jqXHR, textStatus) { 
    document.getElementById(loaderId).style.display = 'none';
}

希望能解决。本地测试很困难。

请记住，由于该文件被称为“全局”，这显然可能会影响许多其他页面，因此您可能需要对加载程序或单独的文件使用空检查...