JS加载功能的简单实现

我们经常在浏览网页的时候会看到数据在加载时，出现的装货提示。其实这个功能原理是很简单的，就是一个差异遮盖当前页面，然后装货就在遮盖差异层上展示出来，现在我们来动手实现一下。1.当前页面：复制代码代码如下： div class=' current ' a href=' # ' onclick=' showLoAding()' LoAding/a/div 2 .遮罩层：复制代码代码如下： div id=' over ' class=' over '/div 3 .装货展示层：复制代码代码如下： div id=' layout ' class=' layout ' img src=' http://img。cppcns。com/pic。PHP？URL=/file _ images/article/201311/2013112931。gif ' alt=' '//div整体代码：复制代码代码如下：DOCTYPE html html xmlns=' http://www .w3。org/1999/XHTML ' head title/title style type=' text/CSS ' .当前a { font-size : 20px} .超过{显示：无；绝对位置：top : 0；左： 0；宽度： 100%;高度： 100%;背景-color : # F5 F5；opa city 33600.5 z-index : 1000；} .布局{显示：无；绝对位置：前：名40%；左： 40%;宽度： 20%;高度： 20%;z指数： 1001；文本对齐：居中；}/样式脚本类型='text/javascript '函数showLoading(){文档。getelementbyid(' over ')。风格。display=' block文件。getelementbyid('布局')。风格。display=' block}/script/head body div class=' current ' a href=' # ' onclick=' showLoading()' Loading/a/div div id=' over ' class=' over '/div div id=' layout ' class=' layout ' img src=' http://img。cppcns。com/pic。PHP？URL=/file _ images/article/201311/2013112931。gif ' alt=' '//div/body/html最终效果

在网上还看到另外一种实现方式，感觉思路不错，就是利用射流研究…不断的改变超文本标记语言标签的价值值，达到加载提示的效果，根据他的思路我自己实现了下，代码如下：复制代码代码如下：DOCTYPE html html xmlns=' http://www .w3。org/1999/XHTML ' head title/title！-script src=' http : script/jquery-1。8 .2 .js '/脚本样式类型=' text/CSS ' # TB { width : 100%；高度： 100%;线高： 10px} # TB tr TD { text-align : center；} .进度条{ font-family : Arial字体粗细：更粗；颜色：灰色；背景-颜色：白色；padd : 0pxborder-style :无；} .百分比{ font-family : Arial颜色：灰色；文本对齐：中心；边框宽度：中等；边框样式：无；}/样式脚本类型=' text/JavaScript ' var bar=0；var step=' | |/* *第一种方式即：$(文档)。就绪（函数(){ 0.});*///$(function(){//progress()；//});/* *第二种方式*///窗口。onload=function(){//progress()；//} /* *第三种方式模拟$(文档)。就绪（函数(){ 0.});*/(function () { var ie=！(window.attachEvent！窗户。歌剧)；var wk=/web kit \/(\ d)/I . test(导航器。用户代理(RegExp).$1 525);var fn=[]；var run=function(){ for(var I=0；我明白。长；fn[i]()；};var d=文档；d.ready=function (f) { if(！ie！wk d.addEventListener)返回d . addeventlistener(' DOMContentLoaded '，f，false)；if (fn.push(f) 1)返回；if(ie)(function(){ try { d . document元素。doscoll('左')；run()；} catch(err){ setTimeout(参数。被呼叫者，0)；} })();否则if (wk) var t=setInterval(函数(){如果(/^(loaded|complete)$/.test(d . readystate))clearInterval(t)，run()；}, 0);};})();文件。ready(function(){ progress()；});函数进度(){ bar=bar 2；step=step ' | | document . getelementbyid('百分比')。value=bar " %文件。getelementbyid(“进度条”).值=步长；if(bar=98){ setTimeout(' progress()'，100)；} }/脚本/头体表id=' TB ' tr TD输入类型=' text ' size=' 50 ' class=' percent ' id=' percent '/TD/tr TD输入类型=' text ' size=' 50 ' class='进度条' id='进度条'/TD/tr/table/body/html最终效果