通过js在页面加载时为html元素添加一个class,随后又在setTimeout中删除之,问作用

Posted 2023-05-16

/* CSS */
.x-repaintzoom:1;background-color:transparent;-moz-outline:none;

/* JS */
$('html').addClass("x-repaint");
setTimeout(function()
$('html').removeClass("x-repaint");
, 1);

请问高手：这段代码有什么作用？

这是我们头儿给出的题，让我们思考下，这里请教了。。

作用举例：
某一个页面加载可能要几秒钟，因为js是顺序执行的，那么一开始通过js给页面加一个正在加载中的样式，然后过几秒钟，页面加载完了，去掉加载中样式，给用户的感觉就很友好了。 参考技术A 先加一个样式,然后删掉,实际上就像你点查询时弹出一个等待的页面,考虑的是用户友好.本回答被提问者采纳 参考技术B $('html').addClass("x-repaint");//网页一加载就给页面加上样式x-repaint
setTimeout(function()
$('html').removeClass("x-repaint");//在执行后一毫秒移除
, 1); 参考技术C 先给html加 样式 1毫秒后有将其样式删掉

我的 HTML Div 元素在页面加载时立即消失

【中文标题】我的 HTML Div 元素在页面加载时立即消失

【英文标题】：My HTML Div Element disappears immediately when page loads

【发布时间】：2017-05-07 15:17:44

【问题描述】：

我通过 AJAX 获取 HTML 元素并动态添加到 DIV 元素。问题是，有时 DIV 加载正确，但有时它会变为空白并且 DIV 元素上什么也不显示，即使数据在浏览器中正确记录但没有显示出来。我附上了问题截图的链接，以便更好地理解。

Page loaded for first time

Page refreshed several times and data appears

Data disappears again when page is refreshed but AJAX is fetching the html code correctly

//////fetch table from database 
var getTable = function (id, value, tableId, context)

			$.ajax(
				url:'getJSON.php',
				type:'POST',
				dataType: 'json',
				data:id+"="+value,
				success:function(data)
					
				
				console.log(data);
				
				///////////////table/////////////
					
				if(data.length>0)
				
	  				var table = $('#'+tableId).
	  							dataTable(
	  								"pageLength": 5,
	  								"lengthChange": false
	  							);
	  				var row,cell;
					var count = Object.keys(data[0]).length;
	 			

	 			 for(i=0;i<data.length;i++)
					
	 	  			if(context.toLowerCase()==="classenroll")
	 	  			
	 	  				table.fnAddData([
                                    data[i].CODE,
									data[i].NAME
					   ]);	

					

					if (context.toLowerCase()==="showmodifyassign") 

						table.fnAddData([
						
		   					 data[i].TITLE,
					
							 data[i].DESCRIPTION,

							 data[i].DEADLINE,

							 data[i].NAME,
							
							 "<a href=\"#\">Edit</a>"
							
						]);
						
						
					


					if (context.toLowerCase()==="submittedassignments") 

						table.fnAddData([
							
							data[i].STUDENT_ID,
							
							data[i].FULL_NAME,
							
							data[i].CLASS_NAME,

							data[i].TITLE,

							data[i].DEADLINE,

							data[i].SUBMISSION_DATE,

							"<a href = "+data[i].FILENAME+">"+"Download Now"+"</a>"
						]);

					

					if (context.toLowerCase()==="showdueassignments") 

						table.fnAddData([

							data[i].TNAME,

							data[i].TITLE,

							data[i].POSTINGDATE,

							data[i].DEADLINE,

							"<a target=\"_blank\" href = \"submit.php\">Submit</a>"
						]);
						
					

					if (context.toLowerCase()==="modifyclass") 


						table.fnAddData([

							data[i].CODE,

							data[i].NAME,

							data[i].DESCRIPTION,

							"<a href = \"#\">Edit</a>"
						]);
						
					

					
				
			
				/////////////////////////////////////////////////
		
	
);
	


  


///code for the dynamic navbar

$("#wb_element_section_teacher").ready(function(e)
  		
  		getForm("homeTeacher");
  		getTable($("#hTeacherTitle").val(),$("#hTeacherId").val(),"newAssignTable","submittedAssignments");
		topMargin(0);
	

	);
	
	$('body').on('click', '#teacherHome', function()
	        
	        getForm("homeTeacher");	            
      		getTable($("#hTeacherTitle").val(),$("#hTeacherId").val(),"newAssignTable","submittedAssignments");
            tempHeight=650;
    		$("#wb_element_section_teacher").css('height',tempHeight+'px');
    		topMargin(tempHeight-divHeight);
      	return false;
    );

    
    $('body').on('click', '#createAssign', function()
    		
    		getForm("createAssign");
    	 	tempHeight=650;
    		$("#wb_element_section_teacher").css('height',tempHeight+'px');
    		topMargin(tempHeight-divHeight);
    	return false;
    );
    

    $('body').on('click', '#modifyAssign', function()
    	
    		getForm("modifyAssign");
    		tempHeight=950;
    		getTable("showMod","somevalue","modAssign","showmodifyassign");
    		$("#wb_element_section_teacher").css('height',tempHeight+'px');
    		topMargin(tempHeight-divHeight);
    	return false;
    );

     
     $('body').on('click', '#createClass', function()
    		getForm("createClass");
    		tempHeight=650;
    		$("#wb_element_section_teacher").css('height',tempHeight+'px');
    		topMargin(tempHeight-divHeight);
    	return false;
    );
     

     $('body').on('click', '#modifyClass', function()
    	getForm("modifyClass");
    	getTable("modClass","somevalue","modClass","modifyclass");
    	tempHeight=1000;
    	$("#wb_element_section_teacher").css('height',tempHeight+'px');
    	topMargin(tempHeight-divHeight);	
    return false;
    );

$("#wb_element_section_teacher").ready(function()
  		
  		getForm("homeStudent");
  		getTable("due","somevalue","dueAssignments","showdueassignments"); 
	topMargin(0);

);
  

$('body').on('click', '#homeStudent', function()
        
        getForm("homeStudent");	  
        getTable("due","somevalue","dueAssignments","showdueassignments");          
        tempHeight=650;
		$("#wb_element_section_teacher").css('height',tempHeight+'px');
		topMargin(tempHeight-divHeight);
  	return false;
);


$('body').on('click', '#enrollClasses', function()
		
		getForm("enrollClasses");
	 	tempHeight=650;
		$("#wb_element_section_teacher").css('height',tempHeight+'px');
		topMargin(tempHeight-divHeight);
	return false;
);


  $('body').on('click', '#viewEnrolled', function()
		getForm("viewEnrolled");
		getTable($("#hStudentTitle").val(),$("#hStudentId").val(),"enrolledClassesTable","classEnroll");
		tempHeight=650;
		$("#wb_element_section_teacher").css('height',tempHeight+'px');
		topMargin(tempHeight-divHeight);
	return false;
);

$('body').on('click', '#viewSent', function()
	
		getForm("viewSent");
		getTable("sent","somevalue","sentAssignments","showsentassignments");
		tempHeight=950;
		$("#wb_element_section_teacher").css('height',tempHeight+'px');
		topMargin(tempHeight-divHeight);
	return false;
);

   

   ///////////

////JS to fetch the Elements (HTML)
getForm = function (userType)

  	$.ajax(

  		url: "forms.php",
  		type:"POST",
  		data:"type="+userType,
  		success:function(data)
  			console.log(data);
  			$("#wb_element_section_teacher").html(data);
  			return true;
  		

  	);

  

<!--
In Javascript code:

hTeacherTitle.val() = "TEACHER_ID";
hTeacherId.val()=(Integer value) ID of the teacher returned from the Database;

-->




<!-- Code that is fetched when page loads-->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed " data-toggle="collapse" data-target="#navItems" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="glyphicon glyphicon-th-list"></span> </button>
</div>
<div id="navigation" class="col-md-12 ">

<ul class="nav nav-pills navbar-default collapse navbar-collapse nav-justified" id="navItems" >

  		<li id="teacherHome"><a href="#" class="navbar-text">Home</a></li>
  		<li id="createAssign"><a href="#" class="navbar-text">Create Assignment</a></li>
    	<li id="modifyAssign"><a href="#" class="navbar-text">Modify Assignments</a></li>
    	<li id="createClass"><a href="#" class="navbar-text">Create Class</a></li>
        <li id="modifyClass"><a href="#" class="navbar-text">Modify Class</a></li>
     

</ul>

</div>

<div class="container-fluid" style="margin-top:10%;"> <center><h3>New Assignments</h3></center>
</div>
<div id="newAssign">
	<table id="newAssignTable" class="table table-bordered table-striped">
 
		<thead>
  <tr>
		  <th>Student\'s ID</th>
      <th>Student\'s Name</th>
      <th>Class Name</th>
      <th>Assignment Title</th>
      <th>Due Date</th>
      <th>Submission Date</th>
      <th>Download</th>
		</tr> 
    </thead>
   
    <tbody>
    </tbody>
 
	</table>



</div>

【问题讨论】：

在这里放一些代码或jsfiddle的url，这样任何人都可以检查它。

请添加一些代码，否则我们只能猜测

comment

在帖子中添加代码请检查。

只有导航栏中的“主页”才能工作，因为我已经为主页提供了 html 代码，只有主页会产生问题。否则，当页面加载时，导航栏中的每个选项卡都可以正常工作

【参考方案1】：

当 DOM 准备好时，您是否尝试通过 Ajax 加载此 HTML？也许尝试使用$(document).ready() 而不是$("#wb_element_section_teacher").ready()。

【讨论】：

我也试过这个，但问题还是一样。 div 会自发显示和隐藏，但有时会开始工作。

嗯，好吧，你知道$("#wb_element_section_teacher").ready() 不是真的有效。您正在检查 DOM 是否准备就绪，而不是特定元素。

也许检查来自服务器的响应是否被缓存？ Ajax 调用是否每次都在进行？

实际上“#wb_element_section_teacher”是始终可用的 div 元素的 id（屏幕截图中的灰色区域），即只有该数据被加载到这个被 AJAX 调用的 div 元素中。是的，AJAX 调用成功了，因为在每次 AJAX 调用之后，我都会在浏览器中记录数据，并且当页面加载时，AJAX 调用的数据总是显示在日志中。