Question

我正在研究wordpress cms。我有页面模板，其中包含选定的帖子（它通过插件工作）。现在有一个删除帖子按钮以及每个选定的帖子。如果有人点击删除帖子按钮我想显示一个loading-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>

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

我没有ajax代码，我只是使用wp-plugin。不知何故工作，所以片段在那里。我可能会这样做完全错了。如果你能提出一个解决方案，那就太棒了

如果您发现它与此相关，则插件的一部分会生成删除链接。

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，然后在重新加载完成后隐藏。请帮我解决一个更好的解决方案。非常感谢提前。

Answer 1

您可能希望存储＆＃39; loading＆＃39;本地图像

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();
});

Answer 2

如果您的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>

Answer 3

使用'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();
    });

立即显示loading-gif

3 个答案: