CSS教程之用CSS完成网页图片的预加载

在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识。
网页制造poluoluo文章简介：CreatingaCSSImagePreloader.
有良多种办法来完成图片的预加载，一般年夜部分利用Javascript让事变转动。不要再受Javascript预载的束厄局促了吧，用CSS你就能够绝不贫苦的预载你的图片。

为何利用预载

你为何会思索利用预载呢？你是不是曾有个网站，在谁人网站你要转动你的导航然后有个提早直到图片被加载完……嘿嘿。预载将在这方面匡助你。它将在页面加载的时分加载那些图片并将其存储在扫瞄器的缓存内里。如许当用户转动导航的时分，很大度并且流利，没有提早。
CSS代码

这个观点就是写一个CSS款式设置一批背景图片，然后将其埋没，如许你就看不到那些图片了。那些背景图片就是你想预载的图片。
这是一个例子:

1. #preloader{/*Imagesyouwanttopreload*/background-image:url(image1.jpg);background-image:url(image2.jpg);background-image:url(image3.jpg);width:0px;height:0px;display:inline;}

复制代码

这只是一种埋没你的图片的办法，以是它们不会被显现。我也见到有人利用十分年夜的background-position值将图片推进来。大概给一个负的margin值。有良多中办法埋没你要预载的图片，选择最合适你的吧。
另外一种情形

有伟大的图片必要下载的情形其实不会常常产生，假如你接纳一般的做法，供应某种图片正在加载的暗示。这里是一些CSS，能够给用户一个提醒：图片正在加载。

1.         img{background:url(loadingHourGlass.gif)no-repeat50%50%;}

复制代码

gif图片能够是动画，相似于mac上的沙岸球大概PC上的沙漏之类的东东。接纳一个动画吧，如许用户就会晓得事变正在举行。
结论

当预载成心义的时分做你最好的吧，你的用户将以此喜好上你。现实上他们大概并没有注重到，可是这是一件功德情，假如他们注重到你的网站正在加载，那大概真的是太慢了。
检察Demo
PS:我来注释一下这个demo吧。大概原作者没有思索太多，只是想演示一下预加载的效果，以是这个demo页面做的有些复杂：他只是将预载的图片用于a:hover的背景了，如许在鼠标经由的时分，就能够无明灭的实际那张图片。嗯，也就是文中的第二种用法……

现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。

运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。