在Google Chrome中使用“請稍候gif圖片”的問題

Question

我有一個包含大量HTML元素和CSS代碼的JSP頁面，在document.ready（）內的所有代碼完成之前，此頁面似乎已損壞。為避免最初的滯后，我決定使用“請稍候GIF圖片”當內容加載時。我遇到了一個出色的代碼，該頁面顯示“請等待符號”，直到頁面被加載。我在一個示例JSP中對其進行了測試，並且在Mozilla Firefox瀏覽器中正常運行。幫我解決這個問題。下面給出了相同的代碼

<style type="text/css">
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('images/LoadingWait.gif') 
                50% 50% 
                no-repeat;
}

body.loading {
    overflow: hidden;   
}

body.loading .modal {
    display: block;
}
</style>
<script type="text/javascript">
 $(document).ready(function(){
    $body = $("body");
    $body.addClass("loading");
    //important code that takes some time to process 
    alert("sd");
    $body.removeClass("loading");

}); 
</script>
</head>
<body>
    <div class="modal"></div>
</body>

Answer 1

如果您只有alert("sd"); 此加載未在Chrome上顯示。 因為Firefox等待您在警報彈出窗口上按OK並執行$body.removeClass("loading"); 但是chrome不用等待它執行$("body").removeClass("loading") $body.removeClass("loading");您可以替換代碼$body.removeClass("loading"); 使用setTimeout(function(){$("body").removeClass("loading");}, 5000); 測試鉻的負載。

Answer 2

嘗試刪除window.load()的loading類。 加載所有圖像和腳本后，此事件將提供更好的回調。

$(window).load(function(){
    $("body").removeClass("loading");
});

這只是執行加載功能的更好方法。

在Google Chrome中使用“請稍候gif圖片”的問題

問題描述

2 個解決方案

解決方案1
1 已采納 2014-08-08 07:13:20

解決方案2
0 2014-08-08 07:02:59

在Google Chrome中使用“請稍候gif圖片”的問題

問題描述

2 個解決方案

解決方案1 1 已采納 2014-08-08 07:13:20

解決方案2 0 2014-08-08 07:02:59

解決方案1
1 已采納 2014-08-08 07:13:20

解決方案2
0 2014-08-08 07:02:59