1

在我的项目中，我想显示 .gif 动画（需要显示旋转轮，表示正在下载数据），直到数据从服务器获取，单击“显示产品详细信息”后。

为此，我采用了两种方法：

第一种方法是使用 Ajax（在第一种方法中，数据在获得响应后附加到页面），第二种方法是没有 Ajax（页面被刷新）。

根据要求，我需要在第二种方法中实现功能。但是在第二种方法中，动画不起作用（轮子不旋转）。似乎浏览器正忙于等待响应。下面我给出了这两种方法的 jQuery 代码。任何人都可以建议如何使用第二种方法。提前致谢。

第一种方法：

function DisplayProductDetails () {
    $(‘ a#getProdutDetails).click(function (e) {         
        $.get($(this).attr('href'), function (response) {
            $("div.loadingIndicator").show();
            if (response.length > 0) {
                $('body').append(response);
            }
        });
        e.preventDefault();
        return false;
    });
}

第二种方法：

function DisplayProductDetails () {
    $(‘ a#getProdutDetails').click(function (e) {     
        $("div.loadingIndicator").show();
        var link = $(this).attr('href');
        window.document.location = link;
        e.preventDefault();
        return false;
    });
}
4

1 回答 1

0

我想我理解你为什么要这样做，这是我能想到的最好的事情：

<div>
    <a href='http://api.jquery.com/jQuery.get/' id='theLink'>Click here to redirect</a>
    <img style='display:none;' id='Loading' alt='Loading...' src='http://oilandgas.rockwellautomation.com/images/loading.gif'>
</div>


$(function(){
    $('#theLink').click(function(e){
        $(document).queue('LoadPage',function(next){
            $('#Loading').fadeIn('slow',function(){
                setTimeout(function(){next();},1000);
            });
        });

        $(document).queue('LoadPage',function(next){
            var link = $(this).attr('href');
            window.document.location = link;        
        });

        $(document).dequeue('LoadPage');
        e.preventDefault();
        return false;
    });
});

它的作用是强制在链接之前显示加载图像。如果您的浏览器在开始导航时没有立即清除页面，那么用户将在浏览器获取链接资源时看到加载 gif。

根据我自己的观察，似乎大多数浏览器在收到您尝试检索的资源的响应之前不会清除当前页面。在这种情况下，用户将看到图像，直到页面被清除。

这是我在上面展示的解决方案的一个小提琴。如果您的连接速度较慢，您可能会看到我在说什么，否则它会重定向得比显示图像的速度更快。

通过使用淡入延迟图像显示，然后使用队列在代码中分离这些动作，即使连接速度很快，您也有机会看到图像。如果您想确保在页面重定向之前看到图像，您可以随时在其中添加延迟，如下所示：

 $(document).queue('LoadPage',function(next){
    $('#Loading').fadeIn(1000).delay(1000).show(function(){
        next();
    });
 });

这是该方法的示例

于 2013-01-25T21:27:24.193 回答