您的位置:首页 > Web前端 > JavaScript

JavaScript之一个简单的loading效果

2011-04-03 09:08 190 查看
一个简单的loading效果,用四个符号(-、\、|、/) 来模拟一个不断旋转的小东东,以提示用户当前正在载入中,ArcLive 上为玩家建立连线时便是这样显示的,呵呵。效果如下:

载入中...

function easy_loading(id) {
var symbol = ['-', '\\', '|', '/'],
elem = document.getElementById(id),
i = 0;
(function __func() {
elem.innerHTML = symbol[i++ % 4];
setTimeout(__func, 200);
})();
}
easy_loading('loadin');


为了避免可能出现的阻塞浏览器线程的情况,这里用setTimeout 代替了setInterval。

// function easy_loading(id) { var symbol = ['-', '\\', '|', '/'], elem = document.getElementById(id), i = 0; (function __func() { elem.innerHTML = symbol[i++ % 4]; setTimeout(__func, 200); })(); } easy_loading('loadin');
// ]]>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: