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';
}

希望能解决它。很难在当地进行测试。

请记住，由于该文件名为“global”，显然可能会影响其他一些页面，因此您可能希望对加载程序或单独的文件使用空值检查...

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

1 个答案: