页面加载效果代码（页面加载的过程）

本篇文章给大家谈谈页面加载效果代码，以及页面加载的过程对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、网站中“页面加载中...”代码
• 2、html页面怎么实现动态加载页面
• 3、jQuery 页面加载等待特效，当数据加载完成效果消失的代码？

网站中“页面加载中...”代码

script type="text/javascript"

window.onload=function(){

var a = document.getElementById("loading");

a.parentNode.removeChild(a);

}

document.write('div id="loading" style="background:#CC4444;color:#FFF;width:75px;line-height:20px;position:absolute;padding:0 3px"正在读取.../div');

/script

body style="margin:0px;padding:0px;font-size:12px"

iframe src="" width="500px" height="500px"/iframe

/body

已经在使用的

html页面怎么实现动态加载页面

方法：1、直接贴图：在界面上贴一个gif动态等待效果图片，gif图片获取方式：网上找素材，会ps的可以自己制作img src="wait.gif" /

2、CSS3/SVG/HTML5 Canvas手动绘制等待效果：

这种效果：网上有很多类似素材，可以根据需要选择，或使用上述技术绘制

下面提供一个CSS3绘制的范例

3、CSS的代码如下：

style

.loading {

width:0;

height:0;

border-right:20px solid #fff;

border-top:20px solid #000;

border-left:20px solid #fff;

border-bottom:20px solid #000;

border-radius: 20px;

-moz-border-radius: 20px;

-webkit-border-radius: 20px;

}

.loading {

animation: bganim 0.6s linear 0s infinite;

-moz-animation: bganim 0.6s linear 0s infinite;

-webkit-animation: bganim 0.6s linear 0s infinite;

}

@keyframes bganim {

from { transform:rotate(0deg); } to { transform:rotate(360deg); }

}

@-moz-keyframes bganim {

from { -moz-transform:rotate(0deg); } to { -moz-transform:rotate(360deg); }

}

@-webkit-keyframes bganim {

from { -webkit-transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); }

}

/style

4、labelCSS3效果/label，div class="loading"/div

效果如下图：运行机制很简单，先手动绘制一个静态的图，然后控制对应div进行360度旋转，即可实现

5、使用js等待效果插件(如：spin.js)

6、JS代码如下：

var opts = {

lines: 9,

length: 0,

width: 15,

radius: 20,

corners: 1,

rotate: 0,

direction: 1,

color: '#0101DF',

speed: 1,

trail: 34,

shadow: false,

hwaccel: false,

className: 'spinner',

zIndex: 2e9,

top: '50%',

left: '50%'

};

var target = document.getElementById('img_wait');

var spinner = new Spinner(opts).spin(target);

7、html代码的引用：div id="img_wait"/div

8、打开测试，效果如下

jQuery 页面加载等待特效，当数据加载完成效果消失的代码？

页面加载等待特效，当数据加载完成效果消失的代码如下:

$.ajax({

url:"",

type:"post",

data:{"xx":"xx"},

beforeSend:function(){

//这里是开始执行方法，显示效果，效果自己写

},

complete:function(){

//方法执行完毕，效果自己可以关闭，或者隐藏效果

},

success:function(){

//数据加载成功

},

error:function(){

//数据加载失败

}

});

关于页面加载效果代码和页面加载的过程的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。