我在想 Ajax 微调器真的很棒,但是图像旋转实际上显示有一些延迟或者加载得太早,我想也许我可以使用这些老学校字符来提供更准确的 ajax 活动反馈。
|、/、—、\
假设目标段落被称为<p id="target"></p>
如何在该段落中交换这些字符而不会占用太多资源,我已经在项目中加载了 JQuery。
非常感谢你们!
我在想 Ajax 微调器真的很棒,但是图像旋转实际上显示有一些延迟或者加载得太早,我想也许我可以使用这些老学校字符来提供更准确的 ajax 活动反馈。
|、/、—、\
假设目标段落被称为<p id="target"></p>
如何在该段落中交换这些字符而不会占用太多资源,我已经在项目中加载了 JQuery。
非常感谢你们!
这允许您同时拥有多个事件加载指示器。只需将它们存储在变量中并stop()
在不再需要它们时调用。
function loader(el, delay) {
if (typeof el === "string")
el = document.getElementById(el);
if (!el)
return;
delay = delay || 100;
var chars = "|/-\\".split("");
var i = 0;
var timer = setInterval(function(){
el.innerHTML = chars[ i++ % chars.length ];
}, delay);
// public method to stop the animation
this.stop = function() {
clearInterval(timer);
}
}
// make a new loader and start animation
var ld1 = new loader("loader"); // or loader($("#loader")[0]);
// content is loaded stop animation
ld1.stop();
从非常页面:
- 没有图像,没有外部 CSS
- 无依赖项(支持 jQuery,但不是必需的)
- 高度可配置
- 独立于分辨率
- 在旧 IE 中使用 VML 作为后备
- 使用@keyframe 动画,回退到 setTimeout()
- 适用于所有主流浏览器,包括 IE6
- 麻省理工学院许可证
也许是这样的:
function change(areDoneYet) {
var realFun = (function(doneYet) {
var chars = "|/-\\";
var el = $('#target'); // I think that's the JQuery way
var current = el.innerHTML;
var changeTo = "";
if (current == "") changeTo = chars.charAt(0);
else
changeTo = chars.charAt(chars.indexOf(current) % chars.length);
el.innerHTML = changeTo;
if (!areDoneYet())
setTimeout(realFun, 100, doneYet);
});
realFun(areDoneYet);
if (!areDoneYet())
setTimeout(realFun, 100, areDoneYet);
}
嗯。这有点不雅。它需要一个回调来返回它是否应该停止。
Mohammad - 在“隐藏”的 div 中加载图像将解决加载图像的延迟问题。但是,我想您的问题更多是对图像替代品的好奇,而不是解决延迟本身。
var str = '|/—\\';
var target = $('#target');
var x = 0;
setInterval(function(){
target.text(str.charAt((x++)%str.length))
},5000)