加载点 jQuery 插件

不久前，读者 James Dimick 通过电子邮件向我发送了一些他正在使用的 jQuery 代码，用于制作一个“加载点”效果。您知道，经典的设计模式，其中屏幕（或某个区域）显示“加载中...”并伴随着逐渐增加的点。

加载
加载。
加载..
加载…
加载….

我看了他的代码，说：“哦，是的，我相信我可以做得更有效率。”然后我拿了他的代码，把它改成了两倍长 =)。但公平地说，我把它做成了一个插件，并让它变得更加灵活，功能更强大。

它的作用

您可以像这样在任何元素上调用它

$("#randomArea").Loadingdotdotdot({
    "speed": 400,
    "maxDots": 4,
    "word": "Loading"
});

它完全用“加载”文本（带有动画点）替换该元素的内容。速度是指下一个点放置的速度。maxDots 指的是在它开始循环之前，最多可以有多少个点。

该插件确保“加载中...”水平和垂直都精确地位于调用它的元素的中心。

它的用途是什么？

最有可能的是，您会在执行某个 AJAX 调用之前在元素上使用它。这将向用户提示该区域正在发生某些操作。假设在该 AJAX 调用的成功（或错误）之后，该区域的内容将再次被替换（替换“加载中...”）。

演示和下载

在下载/使用之前查看演示页面。这里有一个“清理”函数，应该在任何实际环境中使用。该插件中调用了一个 setInterval() 函数，在 AJAX 调用成功后应该停止该间隔，以防止浏览器在不再存在的元素上运行它。

查看演示   下载文件

有趣的经验

我使用了一种我认为类似于 Doug Neiner 方法 的方法创建了这个插件。因此所有函数、变量和参数都包含在插件的“基础”中。我从 Doug 那里学到的另一件事是，如何让插件根据传递给它的参数执行不同的操作。您在上面看到了默认用法，其中您将速度和 maxDots 作为对象传递给它。但是，它执行的清理操作是通过将一个类似于以下字符串的字符串传递给插件来完成的

$("#randomArea").Loadingdotdotdot("Stop");

这是通过测试typeof参数在执行任何操作之前的类型。

$.fn.Loadingdotdotdot = function(options) {
        if (typeof(options) == "string") {
            // do something
        } else { 
            // do a different (default) thing
        } 
};

使用 CSS3 动画

James Dimick 还开始尝试 CSS3 动画，并提出了一些用于此加载点业务的替代技术。其中之一是在 span 中包装这些点，然后使用关键帧动画来无限循环它们的透明度，彼此偏移。

<p id="loading">Loading<span>.</span><span>.</span><span>.</span></p>

@-webkit-keyframes opacity {
	0% { opacity: 1; }
	100% { opacity: 0; }
}
@-moz-keyframes opacity {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

#loading {
	text-align: center; 
	margin: 100px 0 0 0;
}

#loading span {
	-webkit-animation-name: opacity;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: infinite;
	
	-moz-animation-name: opacity;
	-moz-animation-duration: 1s;
	-moz-animation-iteration-count: infinite;
}

#loading span:nth-child(2) {
	-webkit-animation-delay: 100ms;
	-moz-animation-delay: 100ms;
}

#loading span:nth-child(3) {
	-webkit-animation-delay: 300ms;
	-moz-animation-delay: 300ms;
}

请注意供应商前缀和 当前的浏览器支持。

动画演示 #1

他的下一个想法是使用一个点圆圈，它会像那些 有趣的 AJAX 加载图形 一样进行动画，只是使用纯 CSS3 动画。

动画演示 #2

更新

1/25/2012:

更新了插件，以包含“word”参数，以便您可以轻松地更改文本。 感谢 Harris Novick。

这是另一种 CSS 动画技术，其中一组点都放在一起（而不是在单独的 span 中），并且通过对它们的父元素的宽度进行动画（隐藏溢出）来显示。

这些旋转器 也值得注意，因为它们属于同一个基本设计模式组。