Question

在我的项目中，我希望在点击“显示产品详细信息”后显示.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;
    });
}

Answer 1

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

<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。

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

Here is a fiddle of the solution I show above.如果您的连接速度很慢，您可能会看到我在说什么，否则它会比图像显示更快地重定向。

通过淡入图像显示延迟，然后使用队列将代码中的这些操作分开，即使连接速度很快，您也有机会看到图像。如果你想确保在页面重定向之前看到图像，你总是可以像这样添加一个延迟：

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

Here is an example of that method

jQuery：.gif动画无效

1 个答案: