0

我正在研究 wordpress cms。我有包含所选帖子的页面模板（它通过插件工作）。现在每个选定的帖子都有一个删除帖子按钮。如果有人点击删除发布按钮，我想显示一个加载 gif，以便该人知道删除过程正在进行（自然不是每个人都精通技术）。所以我搜索了一个解决方案并使用了这段 javascript。

 <script type="text/javascript">
    jQuery(document).ready(function($) {
      jQuery('#page-load')
        .hide()  // hide it initially
        .ajaxStart(function() {
            jQuery(this).show("fast");
        })
        .ajaxStop(function() {
            jQuery(this).hide();
        });
    }); 
    </script>

连同这段 HTML。它一起完成了这项工作。

<div id="page-load"><img src="http://awesomesite.com/images/loader.gif" /></div>

ISSUE : 问题是，在单击 remove-post 链接时，加载 gif 显示的时间很晚，几乎是在重新加载页面时。我希望完成的是加载 gif 应该立即出现在单击删除发布按钮时，然后在重新加载完成后隐藏（一旦单击的帖子被删除）。

我没有 ajax 代码，我只是使用 wp 插件。不知何故，这奏效了，所以片段就在那里。我可能做错了。因此，如果您能提出解决方案，那就太好了

如果您发现它相关，这里是生成删除链接的插件的一部分。

function wpfp_remove_favorite_link($post_id) {
    if (wpfp_is_user_can_edit()) {
        $wpfp_options = wpfp_get_options();
        $class = 'wpfp-link remove-parent';
        $link = "<a id='rem_$post_id' class='$class' href='?wpfpaction=remove&amp;page=1&amp;postid=". $post_id ."' title='".wpfp_get_option('rem')."' rel='nofollow'>".wpfp_get_option('rem')."</a>";
        $link = apply_filters( 'wpfp_remove_favorite_link', $link );
        echo $link;
    }
}

BOTTOMLINE：我使用这个解决方案总比没有好。我只在 SO 的某个地方找到了这些片段。正如我之前所说，我的方法可能完全错误。一天结束时，我需要的是，当有人单击删除链接时，页面应立即显示加载 gif，然后在重新加载完成时隐藏。请帮助我找到更好的解决方案。提前谢谢了。

4

3 回答 3

1

如果您的 wp-plugin 使用 Ajax ：

 <script type="text/javascript">
    jQuery(document).ready(function() {
        var $pageLoad = jQuery('#page-load');
        $pageLoad.hide();
        jQuery(this).ajaxStart(function() {
            $pageLoad.show("fast");
        })
        .ajaxStop(function() {
            $pageLoad.hide();
        });
    }); 
 </script>

事实上，让加载图像出现的一种更快的方法是在您单击的按钮上设置一个“点击”事件以显示加载图像……但这意味着您必须向我们展示 HTML。

编辑：现在我们有更多代码，您可以使用以下脚本：

 <script type="text/javascript">
    jQuery(document).ready(function() {
        var $pageLoad = jQuery('#page-load');
        $pageLoad.hide();
        jQuery('.remove-parent').on('click', function() {
            $pageLoad.show("fast");
        });
        jQuery(this).ajaxStop(function() {
            $pageLoad.hide();
        });
    }); 
 </script>
于 2013-10-23T08:20:56.693 回答
1

您可能希望在本地存储“加载”图像

CSS

#page-load { display: none; background: url(/local/path/to/assets/loading.gif) no-repeat}

JS

$( document ).ajaxStart(function() {
  $( "#page-load" ).show();
});

$( document ).ajaxStop(function() {
  $( "#page-load" ).hide();
});
于 2013-10-23T08:18:08.657 回答
0

使用“remove-post”按钮的 onClick 事件不是更好吗？您的代码本质上是捕获任何ajax 请求并显示 gif。

HTML：

<button class="remove-post">Remove Post</button>

JS：

$(function() {
    var $pageload = $('#page-load');
    $pageload.hide();  // hide it initially
    $('.remove-post').on('click', function(e) {
        $pageload.show('fast');
    });
});

作为 ajax 结果处理程序的一部分，您可以再次隐藏 gif

$.ajax(
    ...
    success: function() 
        $('#page-load').hide();
    });
于 2013-10-23T08:18:48.790 回答