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

Posted 2023-05-08

【中文标题】你有任何与 jQuery 一起使用的 Ajax 加载图像的想法吗？

【英文标题】：Do you have any Ajax loading image ideas for use with jQuery?

【发布时间】：2010-09-16 08:43:40

【问题描述】：

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

有什么想法吗？

【参考方案1】：

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

制作动画后，将其渲染为页面的一部分；在动画的 onload() 事件上触发 jQuery 加载机制（因此您确定动画已首先加载），并在加载序列结束时使用回调来禁用/隐藏动画 GIF。

【讨论】：

就是这样，非常感谢，ajaxload.info 是一个额外的奖励。再次感谢

【参考方案2】：

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

【参考方案3】：

另一个加载图片的资源：@​​987654321@

【参考方案4】：

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

【参考方案5】：

每当我需要这样的东西时，我都会用一个简单的、居中的、动画的 gif 替换将要加载的元素，上面写着“正在加载，请稍候”或类似的消息。如果只有几秒钟，进度指示器可能有点过头了，但一个简单的动画可以让大多数人确信，是的，您的网站仍在运行。

【参考方案6】：

您可能希望设置一个全局 ajax 事件来显示/隐藏加载图标。看看：http://docs.jquery.com/Ajax_Events

【参考方案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一些关于动画的想法，它有一个可免费下载的集合，享受。