AJAX加载图标

Question

I am using the following AJAX to pull some post content into a lightbox. All works great but is a bit slow. Could anyone give me some pointers with adding a loader icon to the following code?

Thank you!

            jQuery(document).ready(function ($) {

                $(".getpostidlink").unbind('click');

                $(".getpostidlink").mouseover(function (event) {
                    $(".getpostidlink").unbind('click');
                    var postlinkid = $(this).data("postid");
                    var data = {
                        action: 'getpostidhref_action',
                        security: getpostidhref.security,
                        postdata: postlinkid,
                        complete: function () {
                            $(".getpostidlink").unbind('click');
                        }
                    };
                    $.post(getpostidhref.ajaxurl, data, function (response) {
                        $(".getpostidlink").colorbox({
                            inline: true,
                            width: "90%",
                            maxWidth: 800,
                            open: false,
                            onClosed: function () {
                                window.location.reload();
                            }
                        })
                        $("div.dynamicloadcontent").replaceWith(response);
                    });
                });
            });

Answer 1

If you check the jQuery docs for the ajax method, there are a couple of params you can include to help here.

Specifically you could use beforeSend and complete to show and hide a loading icon before and after the ajax has completed.

See here for more info:

http://api.jquery.com/jquery.ajax/