Question

我已经实现了悬停卡。它完全显示90％的时间。但有时它显示一个空的hovercard，我认为它无法加载。顺便说一下，如果你悬停TAG，我会调用一个Web服务，它会显示悬浮卡。

如何确保加载然后显示悬浮卡或如何加载“加载”直到加载并显示数据

这是我的代码

$('.hovercard_tag').hover(function () {
            var span_text = $(this).text();
            var result = '';
            pos = $(this).offset();
            $.ajax({
                url: 'http://xxx/HoverCard_WebService.aspx?q=' + encodeURIComponent(span_text),
                type: 'GET',
                dataType: 'json',

                beforeSend: function () {
                    $(".hovercard").prepend('<p class="loading-text">Yükleniyor...</p>');
                },
                success: function (data) {
                    $(".hovercard").empty();
                    $.each(data, function (index, value) {
                        result += '<div style=\'border-bottom:1px solid #31B1CE;\'><b>' + span_text + '</b><div style=\'display: block;margin: 4px;font-size:4px;line-height: 4px;\'></div></div>';
                        result += '<div style=\'display: block;margin: 4px;font-size:4px;line-height: 4px;\'></div>';
                        result += value.description;
                        result += '<br /><br />';

                        var image_source = 'images/hover_card_plus_icon.png';
                        if (value.followed != '0')
                            image_source = 'images/ok_icon.png';

                        result += '<div style=\'float:left;\'><img id=\'img_category_follow\' value=\'' + value.id + '\' src=\'' + image_source + '\' class=\'cat_takibe_al\' style=\'cursor:pointer;\' /></div><div style=\'float:right;padding-top:-10px\'>' + value.count + ' kişi takip ediyor</div><div style=\'clear:both\'></div>';

                    });
                },
                complete: function () {
                    //$('.loading-text').remove();
                }
            });

Answer 1

$('#selector').ajaxStart(function(){
    // Show your image here when ajax request begins
});


$('#selector').ajaxComplete(function(){
    //Show what you actually want to show after your ajax request is completed.
});

jquery hovercard加载较晚，因此显示一个空的hovercard

1 个答案: