Question

在我的jsp页面中..我正在使用jquery动态显示表。一切都很好，但现在用于显示直到页面准备好的图像/文本即使在我显示表格之后也不会被隐藏。有什么问题？/

这是我的代码：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@ page import="java.sql.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>DbRefresh Sample</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var url="/DbRefresh/FetchRecords";
$(document).ready(function(){
	$('#loading').hide();
	//$.ajaxSetup({cache:false});
	setInterval(callUrl,15000);
	function callUrl()
	{
		//alert("Called");
		$.ajax({
			url:'/DbRefresh/FetchRecords',  
	        type:'post',  
	        dataType: 'json',
	        cache: false,
	        contentType: 'application/json',
	        success: function(data) {
	            $("tr td").remove();
	            $.each(data.obj,function(index,obj)
	                    {
				$("#table").append('<tr><td>'+obj.name+'</td><td>'+obj.age+'</td></tr>');
					})
	               //$("tr td").replacewith(tabdata);
	    		} 
			});
		}
});

</script>
<style type="text/css">
#loading {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: fixed;
  display: block;
  opacity: 0.7;
  background-color: #fff;
  z-index: 99;
  text-align: center;
}

#loading-image {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 100;
 }
</style>
</head>
<body>
<div id="table">
<table border='4' cellpadding='6' cellspacing='3' width='300px'>
<thead><tr bgcolor='66FF00'><th>Name</th><th>Age</th></tr></thead>
</table>
</div>
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</body>
</html>

Answer 1

试试这个：首先纠正加载图片的id。首先默认显示它，然后在AJAX调用完成后和加载表之前立即隐藏它。

<script>
var url="/DbRefresh/FetchRecords";
$(document).ready(function(){
    //$('#loading-image').hide();//remove from here
    //$.ajaxSetup({cache:false});
    setInterval(callUrl,15000);
    function callUrl()
    {
        //alert("Called");
        $.ajax({
            url:'/DbRefresh/FetchRecords',  
            type:'post',  
            dataType: 'json',
            cache: false,
            contentType: 'application/json',
            success: function(data) {
                $("tr td").remove();
                //hide loading image 
                $('#loading-image').hide();
                $.each(data.obj,function(index,obj)
                        {
                $("#table").append('<tr><td>'+obj.name+'</td><td>'+obj.age+'</td></tr>');
                    })
                   //$("tr td").replacewith(tabdata);
                } 
            });
        }
});

</script>

Answer 2

没有标记＆＃34; loading＆＃34; ID

所以让它像

$('#loading-image').hide();

Answer 3

您的img标记ID为loading-image

你在jQuery中使用它$('#loading').hide();

Chang $('#loading').hide();至$('#loading-image').hide();

在callUrl()来电之前将其放入$.ajax()功能。

无法隐藏加载图片

3 个答案: