正在加載中-js/jQuery功能實現

kjst0292 8年前發布 | 6K 次閱讀 Java jQuery JavaScript

前言

       最近在springMVC中集成一個基于jsp報表工具，在集成之后的，由于報表運算量很大，SQL語句比較復雜，所以前臺點擊按鈕觸發以后，呆上幾秒才有反應過來彈出報表框，所以想加入一個類似正在加載中的有好提示，使客戶體驗更好，不過沒想象的那么容易，主要是產品采用的freemarker模版引擎，加載封裝的dialog方法不能直接訪問頁面且不能直接向頁面傳參等等，不過問題都被我一一解決了，廢話不多說，直接切入正題，主要看看這個小功能的簡單實現吧。

 

引入如下HTML元素

<body>
    <div style="width:100% !important;height:850px;text-align:center;">
        <div id="loading" style="margin-top:200px;">
            <p>
                <img src="loading圖片路徑/loading.gif" width="30xp" height="30px" /><br/>
                <font style="height:30px;vartical-algin:center;padding-left:5px"> 正在統計中，請稍等......</font>
            </p>
        </div>
        <iframe id="reportIframe" src=""
            frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" width="100%" height="100%">
        </iframe> 
    </div>
</body>


當然，我的是根據本項目封裝的組件而定的，你可以不需要外層div或者不需要直接限定高度等等。

 

js/jQuery關鍵代碼

$(function(){
    var frameUrl="frame里的要加載頁面的路徑";
    $("#reportIframe").attr("src",frameUrl);
    $("#reportIframe").load(function(){//jQuery控制“加載”div不顯示
        $("#loading").css("display","none");
    });
});


效果

 

后記

       如果你認真看完后，確實是，不完美，等待字樣和圖片要是浮在iframe所在內容之上就好了，這樣iframe加載過度過程中與“正在加載”的字樣和圖片過度的就很緩和貼切，再就是“正在的加載”的字樣和圖片最后能直接定位在彈出框的中央而不是用margin,padding等樣式來定位否則分辨率不同的情況下，可能就不一樣了。

      以上缺點確實有待改善，由于本人時間和精力有限，項目緊，所以不再追求功能的更高質量了，如果正在讀文章的您，有時間有興趣有能力研究出來的話，非常歡迎你留言解答，以便您，我，還有大家共同進步與學習！

 

 

 

 本文由用戶 kjst0292 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！