![](/img/trans.png)
[英]Display loading text or image when href link is clicked inside div of html page
[英]Display a loader image and text when a link is clicked
我有以下JavaScript问题 (尽管与Hudson有关):
该多框架网页的顶部带有多个“标签”,
而且大多数“标签”(但不是第一个标签)都包含大量Google图表,尤其是绘制时间更长的图表。 在Internet Explorer中,似乎冻结了浏览器-
如果我可以显示加载程序图像和消息,则单击“选项卡”会带来更好的用户体验:
我已经找到并可以修改此Hudson HTMP Publishing插件文件:
/var/lib/hudson/plugins/htmlpublisher/WEB-INF/classes/htmlpublisher/HtmlPublisher/header.html
function updateBody(tabId, page) {
document.getElementById(selectedTab).setAttribute("class", "unselected");
tab = document.getElementById(tabId)
tab.setAttribute("class", "selected");
selectedTab = tabId;
iframe = document.getElementById("myframe");
iframe.src = tab.getAttribute("value");
}
上面的updateBody()
方法引用了这段HTML,我无法对其进行修改:
<ul id="tabnav">
<li id="tab1" class="selected" onclick="updateBody('tab1');" value="FinalReport.html">FinalReport</li>
<li id="tab2" class="unselected" onclick="updateBody('tab2');" value="SummaryReport.html">SummaryReport</li>
<li id="tab3" class="unselected" onclick="updateBody('tab3');" value="CalRunnerReport.html">CalRunnerReport</li>
<li id="tab4" class="unselected" onclick="updateBody('tab4');" value="CalRunnerReportStatistics.html">CalRunnerReportStatistics</li>
<li id="tab5" class="unselected" onclick="updateBody('tab5');" value="GSM_CAL.html">GSM_CAL</li>
<li id="tab6" class="unselected" onclick="updateBody('tab6');" value="EDGE_CAL.html">EDGE_CAL</li>
<li id="tab7" class="unselected" onclick="updateBody('tab7');" value="LTE_CAL.html">LTE_CAL</li>
<li id="tab8" class="unselected" onclick="updateBody('tab8');" value="WCDMA_CAL.html">WCDMA_CAL</li>
<li id="tab9" class="unselected" onclick="updateBody('tab9');" value="LTE_TXV3_CAL.html">LTE_TXV3_CAL</li>
<li id="tab10" class="unselected" onclick="updateBody('tab10');" value="WCDMA_TXV3_CAL.html">WCDMA_TXV3_CAL</li>
<li id="tab11" class="unselected" onclick="updateBody('tab11');" value="LTE_VER.html">LTE_VER</li>
<li id="tab12" class="unselected" onclick="updateBody('tab12');" value="WCDMA_VER.html">WCDMA_VER</li>
<script type="text/javascript">document.getElementById("hudson_link").innerHTML="Back to Station18622_Manual_Trigger";</script>
<script type="text/javascript">document.getElementById("hudson_link").href="/job/Station18622_Manual_Trigger/";</script>
<script type="text/javascript">document.getElementById("zip_link").href="*zip*/HTML_Report.zip";</script>
</ul>
有人可以建议对updateBody()
方法进行修改,以向用户显示“正在加载...”消息吗?
更新:
我尝试将以下内容添加到header.html
,但它实际上并没有工作(图像在任何时候都不可见):
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
function updateBody(tabId, page) {
$('#wait').show();
document.getElementById(selectedTab).setAttribute("class", "unselected");
tab = document.getElementById(tabId)
tab.setAttribute("class", "selected");
selectedTab = tabId;
iframe = document.getElementById("myframe");
iframe.src = tab.getAttribute("value");
$('#wait').hide();
}
..........
<h1><a id="hudson_link" href="#"></a><img id="wait" src="/images/loader.gif" width="32" height="32"></h1>
<h2><a id="zip_link" href="#">Zip</a></h2>
<ul id="tabnav">
“ ..由于长时间运行的脚本而没有响应”消息告诉您您的长时间运行的脚本正在阻止ui,这意味着即使您尝试显示加载图像,它也不会移动,因为ui卡住。
您尚未发布切换选项卡后运行的代码,但这可能首先就是问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.