Question

我有一个正在加载jQuery的页面。初始加载包括100条记录，每条记录有6个图标。不用说，加载需要几秒钟，我想给用户一个“加载”提示/动画。

有什么想法吗？

Answer 1

http://www.ajaxload.info/是为这类事情生成动画GIF的绝佳资源。

获得动画后，将其渲染为页面的一部分;在动画的onload（）事件上触发jQuery加载机制（所以你确定动画首先加载），并在加载序列结束时使用回调来禁用/隐藏动画GIF。

Answer 2

Matt Berseth有a nice jQuery-based way of doing this。

Answer 3

另一个加载图片的资源：http://www.loadinfo.net/

Answer 4

您可以将带有动画GIF图像的div显示为加载提示。这就是我过去做过的方式。

Answer 5

任何时候我都需要这样的东西，我会用一个简单的，居中的动画gif来替换那些加载的元素，上面写着“正在加载，请稍候”或类似的消息。如果它只是几秒钟，进度指示器可能有点过分，但是一个简单的动画可以让大多数人保证，是的，您的网站仍然有效。

Answer 6

您可能想要设置全局ajax事件以显示/隐藏加载图标。看看：http://docs.jquery.com/Ajax_Events

Answer 7

您可以在CCS3中执行动画，例如，如果您想要脉冲：

html标记：

<div class="pulse"></div>

css：

.pulse {
    width: 32px;
    height: 32px;
    margin: 25% auto;
    background-color: #303030;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
    border-radius: 16px;
    -webkit-animation: scaleout 1.0s infinite ease-in-out;
    animation: scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes scaleout{
    0%{
        -webkit-transform:scale(0)
    }
    100%{
        -webkit-transform:scale(1);
        opacity:0
    }
}
@-moz-keyframes scaleout{
    0%{
        -moz-transform:scale(0)
    }
    100%{
        -moz-transform:scale(1);
        opacity:0
    }
}
@-ms-keyframes scaleout{
    0%{
        -ms-transform:scale(0)
    }
    100%{
        -ms-transform:scale(1);
        opacity:0
    }
}
@-o-keyframes scaleout{
    0%{
        -o-transform:scale(0)
    }
    100%{
        -o-transform:scale(1);
        opacity:0
    }
}
@keyframes scaleout{
    0%{
        transform:scale(0);
        -webkit-transform:scale(0)
    }
    100%{
        transform:scale(1);
        -webkit-transform:scale(1);
        opacity:0
    }
}

或者你可以创建一个内部图像或背景图像的div，你有here一些动画的想法，它有一个免费的可下载集，享受。

你有任何Ajax加载图像的想法与jQuery一起使用吗？

7 个答案: