0

次のJavaScript に関する質問があります(ハドソン関連ですが):

上部にいくつかの「タブ」があるこのマルチフレーム Web ページがあります -

ここに画像の説明を入力

そして、ほとんどの「タブ」（ただし最初のタブを除く）には多数の 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">
4

1 に答える 1

0

「..実行時間の長いスクリプトが原因で応答していません」というメッセージは、実行時間の長いスクリプトが UI をブロックしていることを示しています。つまり、読み込み中の画像を表示しようとしても、UI が立ち往生。

タブを切り替えた後に実行されるコードを投稿していませんが、そもそもそれが問題なのかもしれません。

于 2013-06-11T08:58:49.180 に答える