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、<label>CSS3效果</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、打开测试，效果如下

以最简单的新闻网页为例，先是做一个模板页，假定其中3个地方要动态更换的：标题，内容，日期，哪么模板中这3个地方都要用特殊的名称表示。

要生成html页时，先读入html模板页，再查询数据库，把查询到标题，内容，日期的实际值替换模板中的特殊名称，并按规则命名另存这个文件。

以上是动态生成html页的基本原理，实际工作中，可灵活处理，比如一次性生成所有页，或者发布一个生成一个，可以用一个模板，也可以根据类别用3个5个模板。模板可以保存为文件文件，也可保存在数据库中等等。

?

动态网页是个广泛的提法，严格意义上是需要基于动态环境的。比如ASP、PHP等环境！可以实现在线动态更新、在线上传（不是用FTP，密码上传）等功能。没有这个环境，用什么工具都不会实现留言簿、论坛的制作。

有了这个环境，你就可以Dreamweaver MX、Flash MX、Firwork MX等等软件结合能实现跑来跑去的小人或动态链接等特效的JAVA、VB脚本等语言编程制作真正意义上的动态网页。

动态离不开静态，一些LOGO等动态图片（GIF格式）都是基于最基本的PHOTOSHOP工具制作出来的。有了一系列的静态图片，结合网上一些小GIF制作软件就可以实现动态图片了。

真正的动态，别人知道不知道无所谓，关键是自己肯定能感受到。他会让你更新网页的工作变的很枯燥，也会因为不能和网友互动信息使你懊恼异常……

总知：动态基于静态，通过软件把静态部分处理好，就可以用编程实现动态网页的制作了 还是先学习一些网页脚本语言吧,然后学习asp,就知道制作动态网页和网站.不过现在用软件来设计很简洁方便.

自己可以找些相关的书或去相关的网站看看. 没有一定的基础是不容易掌握动态网页和网站制作的.

顺便推荐你来这里学习动态网页的制作教程，可以详细的学习初中高等级别的知识http://www.knowsky.com/

---