html ajax等待效果,js加载等待效果

本文介绍如何使用HTML、CSS及JavaScript实现页面加载等待效果。包括首页加载时显示等待图片、AJAX请求数据时的等待提示,以及利用PreLoader实现HUD效果等内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

demo01:

加载首页的时候,可能会很缓慢,放一张等待图片。

New Document

.loadpagediv{

width:160px;

height:56px;

position: absolute;

top:50%;

margin-left:-80px;

margin-top:-28px;

left:50%;

background: url(https://m.baidu.com/static/search/ico_loading.gif) no-repeat;

z-index:9999;

}

var id = setTimeout('loadPage()',100);

function loadPage() {

// 取得文档载入状态,如果载入完成,则readystate='complete'

// 根据这个可以定时去获取文档载入状态,来实现页面载入等待效果

var readystate = document.readyState.toLowerCase();

if (readystate == 'complete')

{

clearTimeout(id);

document.getElementById('loadpagediv').style.display = "none";

}

else {

document.getElementById('loadpagediv').style.display = "block";

id = setTimeout('loadPage()',100);

}

}

代码

已经进入页面,ajax获取数据时候,可能也要等待,这个时候也可以放一张GIF图片。当ajax获取数据成功时,在js中控制显示隐藏即可

af2de1b11dbb57491f9882452afbb4e7.gif

88da1dbbb07184dd2c54480a60fcd848.png

手机站全局的html+css加载等待效果

本文只提供思路,CSS神马的自己定制吧,JS是可以优化的,比如,输出图片的JS也可以放到showdiv()里面,我没有做优化,只是实现,别笑话我,我比较懒... 基本思路:由于Html的解析是从上到下 ...

jquery Mobile点击显示加载等待效果

点击某个按钮或链接时,触发等待加载效果:

C#.Net网页加载等待效果漂亮并且简单

最近网页加载数据比较多,点击后给用户就是白板很不友好,想了很久找了些资料,在网页加载中显示等待画面给客户,页面加载完成自动隐藏等待效果. 在网页后台cs代码:    protected void Pa ...

利用PreLoader实现一个平视显示(HUD)效果(可以运用到加载等待效果),并进行简单的讲解

什么是PreLoader? PreLoader是由Volodymyr Kurbatov设计的一个很有意思的HUD(平视显示效果(Head Up Display)),通过运动污点和固定污点之间的粘黏动画 ...

JS 判断滚动底部并加载更多效果。。。。。。。。。

JS 判断滚动底部并加载更多效果.........

JS实现点击加载更多效果

适用场景:后端直接把所有的文章都给你调出来了,但是领导又让做点击加载更多效果...(宝宝心里苦啊)   点击加载更多效果:         第一个和第二个参数分别是btn和ul的DOM(必填)     ...

jQuery8种不同的瀑布流懒加载loading效果

优化图片加载插件jQuery8种不同的瀑布流懒加载loading效果  在线预览 下载地址 实例代码

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值