我想知道是否有人可以提供帮助。我试图在提交按钮中添加loading.gif，然后在提交内容后隐藏它。这是该页面的模板，
<div class="userpro userpro-users userpro-<?php echo $i; ?> userpro-<?php echo $layout; ?>" <?php userpro_args_to_data( $args ); ?>>
<div class="title"><?php
echo userpro_userwall_get_option( 'title' );
?>
</div>
</div>
<div id="loading" style="display:none; text-align: center;"><img src="http://stolenmx.com/wp- content/themes/load.gif" width="40px" height="40px" alt="Please Wait" /></div>
<div class="textarea"><textarea placeholder="<?php _e('Update Status...','userpro-userwall');?>" id=userpost name="userpost"cols="50" rows="2" style="border: 1px solid #ccc;border-radius: 5px;width: 100%;"></textarea></div>
<div class="buttonpost"><button id="but1" type="submit" name="Post_Now" value="Post Now" title=" <?php _e('Add to Wall','userpro-userwall'); ?>" onclick="user_post_data('userpost',<?php echo get_current_user_id();?>); $('#loading').show();"><i class="fa fa-send fa-fw"></i><b><?php _e('Add to Wall','userpro-userwall');?></b></button></div>
<div class="upload"><button id="but2" class=userwall_upload data-filetype = 'photo' type="submit" name="upload_image" value="upload" data-allowed_extensions=jpg,png,jpeg,gif title="<? php _e('Upload','userpro-userwall'); ?>"><i class="fa fa-image fa-fw"></i> <b><?php _e('Add Photos','userpro-userwall');?></b></button></div>
<div id="userwalldata">
<?php
$args = array(
'posts_per_page' => userpro_userwall_get_option( 'totalpost' ),
'order' => 'DESC',
'include' => '',
'exclude' => '',
'meta_key' => '',
'meta_value' => '',
'post_type' => 'userpro_userwall',
'post_mime_type' => '',
'post_parent' => '',
'post_status' => 'publish',
'suppress_filters' => true );
$postslist = get_posts( $args );
foreach($postslist as $post)
{
global $userpro;
$user_id = get_post_meta( $post->ID,'user_id');
?>
<div class="userwall" id=<?php echo $post->ID?>>
<?php if($user_id[0]==get_current_user_id()) {?>
<div class="userwall_delete_post">
<button type="submit" name="delete" value="delete" title="<?php _e('Delete','userpro-userwall'); ?>" onclick="userwall_delete_post(<?php echo $post->ID;?>);"><i class="fa fa-trash fa-fw"></i> </button>
</div>
<?php }?>
<div class="userwall-post-content-img" data-key="profilepicture"><a href="<?php echo $userpro- >permalink($user_id[0]); ?>" title="<?php _e('View Profile','userpro'); ?>" ><?php echo get_avatar( $user_id[0], "60" ); ?> </a></div>
<div class="userwall-post-content">
<div class="displayname"><a href="<?php echo $userpro->permalink($user_id[0]); ?>"><? php echo userpro_profile_data('display_name', $user_id[0]); ?></a>
<?php $timestamp = strtotime($post->post_date);
$new_date = date('d-M-Y h:i', $timestamp);?>
<div class="post-date"><?php echo "Posted On ".$new_date;?></div> </div>
<br>
<br>
<?php
if($post->post_title=="imgpost")
echo '<img src="'.$post->post_content.'" width="auto" style="-moz-user-select: none;
border-radius: 10px;max-width:99%">';
else
{
echo $post->post_content;
}
?>
</div>
<div class="userwall-comment-data-<?php echo $post->ID;?>" id="userwall-comment" >
<?php
$comments = get_post_meta($post->ID,'user_comment');
foreach($comments as $comment)
{
?>
<div class="userwall_comment_data" id="<?php echo $i ?>"><?php
if($comment['comment_userid']==get_current_user_id()) {
?><div class=userwall_delete_comment>
<button type="submit" name="delete" value="delete" title="<?php _e('Delete','userpro- userwall'); ?>" onclick="userwall_delete_comment('<?php echo $post->ID;?>','<?php echo $comment['comment_content'];?>',this);"><i class="fa fa-trash fa-fw-3"></i> </button></div>
<?php
}?><div class="userwall-comment-content-img" data-key="profilepicture"><a href="<?php echo $userpro->permalink($comment['comment_userid']); ?>" title="<?php _e('View Profile','userpro'); ?>" > <?php echo get_avatar( $comment['comment_userid'], "40" ); ?> </a></div>
<div class="userwall-post-content"><div class="displayname"><a href="<?php echo $userpro- >permalink($comment['comment_userid']); ?>"><?php echo userpro_profile_data('display_name', $comment['comment_userid']); ?></a></div>
<?php
$commenttimestamp = strtotime($comment['comment_date']);
$commenttime = date('d-M-Y', $commenttimestamp);?>
<div class="post-date"><?php echo "Commented On ".$commenttime;?></div><?php
echo "<br><p>".$comment['comment_content']."</p>";
echo "</div></div>";
}
?>
</div>
<div class="commenttext">
<a href="<?php echo $userpro->permalink(get_current_user_id()); ?>" title="<?php _e('View Profile','userpro'); ?>"><?php echo get_avatar( get_current_user_id(), "40" ); ?></a>
<textarea id=userwall-comment-<?php echo $post->ID;?> placeholder="<?php _e('Write your reply and hit enter...','userpro-userwall');?>" onkeypress="user_post_comment('userwall-comment',<?php echo get_current_user_id();?>,<?php echo $post->ID;?>,event);" name="userwall-comment"cols="40" rows="1" style="border: 1px solid #ccc;+border-radius: 6px;margin: 0px 0px 0px -5px;max- width:100%;width:445px;height:46px;margin-top: 6px;"></textarea>
</div>
</div>
<?php
}
?>
</div>
<?php
global $wp_query,$wpdb;
$curauth = $wp_query->get_queried_object();
$post_count = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->posts WHERE post_type = 'userpro_userwall' AND post_status = 'publish'");
if($post_count>=userpro_userwall_get_option( 'totalpost' ))
{
?>
<div class="socialwall-load-more" id="socialwall-load-more" data-max-pages="<?php echo userpro_userwall_get_option( 'totalpost' ) ?>"><span><?php _e('Load More','userpro-userwall')?> </span></div>
<?php }?>
这是我到目前为止所拥有的，
<div id="loading" style="display:none; text-align: center;"><img src="http://stolenmx.com/wp- content/themes/load.gif" width="40px" height="40px" alt="Please Wait" /></div>
<div class="buttonpost"><button id="but1" type="submit" name="Post_Now" value="Post Now" title=" <?php _e('Add to Wall','userpro-userwall'); ?>" onclick="user_post_data('userpost',<?php echo get_current_user_id();?>); $('#loading').show();">
loading.gif在输入内容并按下按钮后加载，但在内容加载后它永远不会隐藏。任何人都可以帮忙解决问题吗？感谢
更新：
前端html，
<div class="post">
<h1 class="single dotted">Social Wall</h1>
<div class="userpro userpro-users userpro-607 userpro-float" data-modal_profile_saved="Your profile has been saved!" data-template="socialwall" data- max_width="480px" data-uploads_dir="http://stolenmx.com/wp-content/uploads/userpro/" data- default_avatar_male="http://stolenmx.com/wp-content/plugins/userpro/img/default_avatar_male.jpg" data-default_avatar_female="http://stolenmx.com/wp- content/plugins/userpro/img/default_avatar_female.jpg" data-layout="float" data-margin_top="0" data- margin_bottom="30px" data-align="center" data-skin="blue" data-required_text="This field is required" data-password_too_short="Your password is too short" data-passwords_do_not_match="Passwords do not match" data-password_not_strong="Password is not strong enough" data-keep_one_section_open="0" data- allow_sections="1" data-permalink="http://stolenmx.com/social-wall/" data-field_icons="1" data- profile_thumb_size="80" data-register_heading="Register an Account" data-register_side="Already a member?" data-register_side_action="login" data-register_button_action="login" data- register_button_primary="Register" data-register_button_secondary="Login" data- register_group="default" data-register_redirect="0" data-type="0" data-login_heading="Login" data- login_side="Forgot your password?" data-login_side_action="reset" data-login_button_action="register" data-login_button_primary="Login" data-login_button_secondary="Create an Account" data- login_group="default" data-login_redirect="0" data-rememberme="true" data-delete_heading="Delete Profile" data-delete_side="Undo, back to profile" data-delete_side_action="view" data- delete_button_action="view" data-delete_button_primary="Confirm Deletion" data- delete_button_secondary="Back to Profile" data-delete_group="default" data-reset_heading="Reset Password" data-reset_side="Back to Login" data-reset_side_action="login" data- reset_button_action="change" data-reset_button_primary="Request Secret Key" data- reset_button_secondary="Change your Password" data-reset_group="default" data-change_heading="Change your Password" data-change_side="Request New Key" data-change_side_action="reset" data- change_button_action="reset" data-change_button_primary="Change my Password" data- change_button_secondary="Do not have a secret key?" data-change_group="default" data- list_heading="Latest Members" data-list_per_page="5" data-list_sortby="registered" data- list_order="desc" data-list_users="0" data-list_group="default" data-list_thumb="50" data- list_showthumb="1" data-list_showsocial="1" data-list_showbio="0" data-list_verified="0" data- list_relation="or" data-online_heading="Who is online now" data-online_thumb="30" data-online_showthumb="1" data-online_showsocial="0" data-online_showbio="0" data-online_mini="1" data- online_mode="vertical" data-edit_button_primary="Save Changes" data-edit_group="default" data-view_group="default" data-social_target="_blank" data-social_group="default" data-card_width="250px" data-card_img_width="250" data-card_showbio="1" data-card_showsocial="1" data-link_target="_blank" data-error_heading="An error has occured" data-memberlist_table="0" data-memberlist_table_columns="user_id,picture,name,country,gender,role,email_user,message_user" data-show_on_mobile="picture,name,country,email_user,message_user" data-memberlist_v2="1" data-memberlist_v2_pic_size="86" data-memberlist_v2_fields="age,gender,country" data-memberlist_v2_bio="1" data-memberlist_v2_showbadges="1" data-memberlist_v2_showname="1" data-memberlist_v2_showsocial="1" data-memberlist_pic_size="120" data-memberlist_pic_topspace="15" data-memberlist_pic_sidespace="30" data-memberlist_pic_rounded="1" data-memberlist_width="100%" data-memberlist_paginate="1" data-memberlist_paginate_top="1" data-memberlist_paginate_bottom="1" data-memberlist_show_name="1" data-memberlist_popup_view="0" data-memberlist_withavatar="0" data-memberlist_verified="0" data-memberlist_filters="0" data-memberlist_default_search="1" data-per_page="12" data-sortby="registered" data-order="desc" data-relation="and" data-search="1" data-exclude="0" data-show_social="1" data-registration_closed_side="Existing member? login" data-registration_closed_side_action="login" data-facebook_redirect="profile" data-logout_redirect="0" data-post_paginate="1" data-postsbyuser_num="12" data-postsbyuser_types="post" data-postsbyuser_mode="grid" data-postsbyuser_thumb="50" data-postsbyuser_showthumb="1" data-postsbyuser_taxonomy="category" data-postsbyuser_category="0" data-following_per_page="4" data-following_paginate="1" data-followers_per_page="4" data-followers_paginate="1" data-publish_heading="Add a New Post" data-publish_button_primary="Publish" data-history_public="0" data-history_title="Points History" data-history_type="mycred_default" data-history_number="10" data-badges_public="0" data-badges_title="Earned Badges" data-following_heading="Following" data-followers_heading="Followers" data-activity_heading="Recent Activity" data-activity_all="0" data-activity_per_page="10" data-activity_side="refresh" data-activity_user="0" data-emd_filters="1" data-emd_thumb="200" data-emd_social="1" data-emd_bio="1" data-emd_fields="first_name,last_name,gender,country" data-emd_layout="masonry" data-emd_per_page="20" data-emd_col_width="22%" data-emd_col_margin="2%" data-emd_accountstatus="Search by account status" data-emd_photopreference="Photo Preference" data-emd_country="Search by Country,dropdown" data-emd_gender="Gender,radio" data-emd_paginate="1" data-emd_paginate_top="1" data-i="607">
<div class="title">Social Wall </div>
</div>
<div id="loading" style="text-align: center;"><img src="http://stolenmx.com/wp- content/themes/load.gif" width="40px" height="40px" alt="Please Wait"></div>
<div class="textarea"><textarea placeholder="Update Status..." id="userpost" name="userpost" cols="50" rows="2" style="border: 1px solid #ccc;border-radius: 5px;width: 100%;"></textarea></div>
<div class="buttonpost"><button id="but1" type="submit" name="Post_Now" value="Post Now" title="Add to Wall" onclick="user_post_data('userpost',1); $('#loading').show();"><i class="fa fa- send fa-fw"></i><b>Add to Wall</b></button></div>
<div class="upload"><button id="but2" class="userwall_upload ajax-file-upload" data- filetype="photo" type="submit" name="upload_image" value="upload" data- allowed_extensions="jpg,png,jpeg,gif" title="Upload"><i class="fa fa-image fa-fw"></i> <b>Add Photos</b></button></div>
<div id="userwalldata"><div class="userwall" id="291"><div class="userwall_delete_post">
<button type="submit" name="delete" value="delete" onclick="userwall_delete_post( 291);"><i class="fa fa-trash fa-fw"></i> </button>
</div><div class="userwall-post-content-img" data-key="profilepicture"><a href="http://stolenmx.com/profile/Admin/" title="_e('View Profile','userpro')"> <img src="http://stolenmx.com/wp-content/uploads/bfi_thumb/5491a01f194c6- 1p9lseef4jgdq3ff9ccn4ooisj0hpjvp3pg9zukt8e6c.jpg" width="60" height="60" alt="" class="modified avatar"></a> </div>
<div class="userwall-post-content"><div class="displayname"><a href="http://stolenmx.com/profile/Admin/"> Luke Day</a> <div class="post-date">Posted On 20-Dec-2014 10:14</div></div><br><br>test</div> <div class="userwall-comment-data-291" id="userwall-comment"> </div><div class="commenttext"> <a href="http://stolenmx.com/profile/Admin/" title="_e('View Profile','userpro')"> <img src="http://stolenmx.com/wp-content/uploads/bfi_thumb/5491a01f194c6- 1p9lseef3v39xf7c2o2dtaexxa9pgyoktbse8fkrnxk4.jpg" width="40" height="40" alt="" class="modified avatar"></a><a href="http://stolenmx.com/profile/Admin/"> Luke Day</a>
<textarea id="userwall-comment-291" onkeypress="user_post_comment('userwall- comment',1,291,event);" name="userwall-comment" cols="40" rows="1" style="border:solid 1px black;max- width: 100%;"></textarea></div></div>
</div>
<style type="text/css">
div.userpro-awsm-pic {
margin-left: -48px;
top: -48px;
}
div.userpro-awsm-pic img {
width: 86px;
height: 86px;
}
div.userpro,
div.emd-main,
div.emd-filters,
div.userpro-search-results,
div.userpro-label label,
div.userpro input,
div.userpro textarea,
div.userpro select,
div.userpro-field textarea.userpro_editor,
div.userpro-msg-overlay-content,
div.userpro-msg-overlay-content input,
div.userpro-msg-overlay-content textarea,
div.userpro-notifier
{
font-family: Roboto;
}
div.userpro-607 {
max-width: 480px;
margin-left: auto;margin-right: auto;
margin-bottom: 30px;
}
div.userpro-607.userpro-nostyle {
max-width: 250px;
}
div.userpro-607.userpro-users {
max-width: 100% !important;
}
div.userpro-607 div.userpro-user {
margin-top: 15px;
margin-left: 30px;
margin-right: 30px;
}
div.userpro-607 div.userpro-user a.userpro-user-img {
width: 120px;
height: 120px;
}
div.userpro-607 div.userpro-user a.userpro-user-img span {
top: -120px;
line-height: 120px;
}
div.userpro-607 div.userpro-user div.userpro-user-link {
width: 120px;
}
div.userpro-607 div.userpro-user a.userpro-user-img,
div.userpro-607 div.userpro-user a.userpro-user-img span {
border-radius: 999px !important;
}
div.userpro-607 div.userpro-list-item-i {
width: 50px;
height: 50px;
}
div.userpro-607 div.userpro-online-item-i {
width: 30px;
height: 30px;
}
div.userpro-607 div.userpro-online-item {
border-bottom: 0px !important;
padding: 10px 0 0 0;
}
div.userpro-607 div.userpro-online-item img.userpro-profile-badge,
div.userpro-607 div.userpro-online-item img.userpro-profile-badge-right {
max-width: 14px !important;
max-height: 14px !important;
}
div.userpro-607 div.userpro-profile-img {
width: 80px;
height: 80px;
}
div.emd-user {
width: 22%;
margin-left: 2% !important;
}
</style>
<div class="prdetails">
</p></div>
</div>
答案 0 :(得分：1)
如果您使用ajax，我有一个解决方案...
if you are doing something like calling ajax
then right on button click
this code
$('#loading').show(); or $('#loading').html('<img src="images/loading.gif">'); loading...');
并且在竞争过程之后获得来自ajax的结果隐藏div
$('#loading').hide(); or $('#loading').html();
or
如果您没有使用ajax，那么在您的按钮上单击您的调用user_post_data函数，该函数在此调用之前返回数据
$('#loading').show();
从函数中获取数据后隐藏此div
答案 1 :(得分：0)
检查特定div的内容长度可以帮助您。但我不知道它是否显示用户以前的帖子。然后你应该在点击按钮之前比较旧的内容长度和按钮点击后的新内容长度。
var content = $('.userwall-post-content').html();
var len1 = content.length;
$('#but1').on('touchstart click',function() {
$('#loading').show();
var len2 = content.length;
if (len2.length > len1.length) {
$('#loading').hide();
}
});
答案 2 :(得分：0)
当用户单击该按钮时，您可以检查div内部的textarea是否存在（这表示内容已加载）。如果不存在，您可以每半秒重复一次检查，持续十秒钟（例如）。一旦内容出现，您就可以隐藏您的微调器。如果之后没有出现，那么可能是出了问题。
类似的东西：
var i;
function isPresent(){
if($(selector).length){
hideSpinner();
clearInterval(i);
}
}
function hideSpinner(){
$(spinner).remove();
}
$("button").on("click", function(){
this.disabled = true;
if(isPresent()){
hideSpinner();
} else {
i = setInterval(isPresent, 500);
setTimeOut(function(){ clearInterval(i); }, 10000);
}
});