Javascript 使用'的问题；请稍候gif图像“；在谷歌浏览器中_Javascript_Jquery_Jsp

Javascript 使用'的问题；请稍候gif图像“；在谷歌浏览器中

javascript jquery jsp

Javascript 使用'的问题；请稍候gif图像“；在谷歌浏览器中,javascript,jquery,jsp,Javascript,Jquery,Jsp,我有一个包含大量HTML元素和CSS代码的JSP页面，在document.ready（）中的所有代码完成之前，该页面似乎一直处于中断状态。因此，为了避免最初的延迟，我决定在加载内容时使用“请等待GIF图像”。我遇到了一个显示“请等待符号”的优秀代码直到页面加载。我在一个示例JSP中测试了这个，在Mozilla Firefox浏览器中效果很好。但是在google chrome中失败了。请帮助我。下面给出了用于相同的代码 <style type="text/css"> .modal {

我有一个包含大量HTML元素和CSS代码的JSP页面，在document.ready（）中的所有代码完成之前，该页面似乎一直处于中断状态。因此，为了避免最初的延迟，我决定在加载内容时使用“请等待GIF图像”。我遇到了一个显示“请等待符号”的优秀代码直到页面加载。我在一个示例JSP中测试了这个，在Mozilla Firefox浏览器中效果很好。但是在google chrome中失败了。请帮助我。下面给出了用于相同的代码

<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>


.莫代尔{
显示：无；
位置：固定；
z指数：1000；
排名：0；
左：0；
身高：100%；
宽度：100%；
背景：rgba（255、255、255、.8）
url（'images/LoadingWait.gif'）
50% 50% 
不重复；
}
身体负荷{
溢出：隐藏；
}
车身、负载、模态{
显示：块；
}
$（文档）.ready（函数（）{
$body=$（“body”）；
$body.addClass（“装载”）；
//需要一些时间来处理的重要代码
警报（“sd”）；
$body.removeClass（“加载”）；
});

尝试删除

窗口中的加载
类。加载（）

。加载所有图像和脚本后，此事件将提供更好的回调

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

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

如果您只有

警报（“sd”）此加载未在chrome上显示。因为firefox正在等待，所以在弹出警报时按ok并执行$body.removeClass（“加载”）但chrome不必等待它执行$（“body”）。removeClass（“加载”）
您可以替换代码$body.removeClass（“加载”）setTimeout（function（）{$（“body”）.removeClass（“loading”）；}，5000）
在chrome上测试加载。
我同意这一点。但它在google chrome中仍然不起作用。请尝试在ready事件中将.modal
div的高度设置为$（窗口）。height（）
。当我使用setTimeout函数代替警报时，发现它起作用。这可能是一个有效的解决方案。但我的建议是，在这种情况下不建议使用setTimeout（）。由于页面加载可能会因internet速度而变化，而这无法在setTimeout（）中定义。这只是我对加载功能的观察。是的，我完全同意你的观点。但是为了在谷歌chrome浏览器的本地服务器上进行测试，我们可以使用这个