Question

我有一个包含大量HTML元素和CSS代码的JSP页面，这个页面似乎被打破，直到document.ready（）内的所有代码都完整。为了避免最初的延迟我决定使用'请稍候GIF图像'正在加载内容。我遇到了一个优秀的代码，显示“请等待符号”，直到页面加载。我在一个示例JSP中测试了这一点，这在Mozilla Firefox浏览器中工作正常。但这在谷歌失败chrome.Please帮我解决这个问题。下面给出了相同的代码

<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");替换为setTimeout(function(){$("body").removeClass("loading");}, 5000);以测试Chrome上的加载。

Answer 2

尝试删除loading中的window.load()课程。在加载所有图像和脚本后，此事件将提供更好的回调。

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

这只是一种更好的加载功能。

使用问题＆＃39;请等待gif图像＆＃34;在谷歌铬

2 个答案: