图片加载进度实时显示

2016-02-19 12:36 97 1 收藏

今天天气好晴朗处处好风光,好天气好开始,图老师又来和大家分享啦。下面给大家推荐图片加载进度实时显示,希望大家看完后也有个好心情,快快行动吧!

【 tulaoshi.com - Web开发 】

代码如下:

script
var l=0;
var imgs;
var sum=0;
var imgs=new Array();
function chk(){
  l--;
  document.getElementById("aa").innerText=""+((sum-l)*100/sum)+"%"
  if (l==0){
     for (var i=0;isum;i++)
       document.body.innerHTML+="img src='"+imgs[i].src+"'"
  }
}
if (document.images){
imgs[0]=new Image()
imgs[1]=new Image()
imgs[2]=new Image()
imgs[3]=new Image()
imgs[4]=new Image()
imgs[5]=new Image()
imgs[6]=new Image()
imgs[7]=new Image()
imgs[0].src="/articleimg/2006/08/3859/01.jpg";
imgs[1].src="/articleimg/2006/08/3859/02.jpg";
imgs[2].src="/articleimg/2006/08/3859/03.jpg";
imgs[3].src="/articleimg/2006/08/3859/04.jpg";
imgs[4].src="/articleimg/2006/08/3859/05.jpg";
imgs[5].src="/articleimg/2006/08/3859/06.jpg";
imgs[6].src="/articleimg/2006/08/3859/07.jpg";
imgs[7].src="/articleimg/2006/08/3859/08.jpg";
}

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

/script
body
div id="aa"0%/div
script
sum=l=imgs.length;
for (var i=0;il;i++){
  imgs[i].onload=chk;
  imgs[i].onerror=chk;//无论图片是否加载成功,都执行指定方法
}
/script
/body

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)



来源:http://www.tulaoshi.com/n/20160219/1601289.html

延伸阅读
标签: ASP
  用过软件的朋友都知道,进度条是一个优秀软件的重要组成部分。 它的存在能够使用户及时掌握程序的运行进度,确认应用程序正常工作。可是ASP中似乎没有上述标准控件,控制起来也比较麻烦。 那幺如何实现进度条呢? 以下是本人的一些观点(仅供参考)   我们通常在用ASP处理程序(指的是写文件或操作数据库)的时候,会专门用一个页面(*...
互联网越来越快,但网页加载时的等待必不可少。据调查,用户能够忍受的最长等待时间大约在6~8秒之间。不过,有趣而富有创意的进度条可以吸引用户,让他们耐心等待。来看看本文收集的30个设计感十足的加载进度条。 Loading by pearlsomani Flat Loading Bars + Icons FREEBIE by Joe Taylor Progress Bar for Aviasales app by Mark M...
标签: Web开发
之前在做一个图片浏览效果时,要看后面的小图必须等到前面的加载完,而且大图的位置是在大量的小图后面,导致大图要等到小图都加载完才能显示,为了解决这个问题,就想到了Lazyload效果。 现在很多网站都用了类似的效果,如淘宝、Bing等。 这个图片延迟加载效果是在Lazyload的基础上扩展的,主要扩展了获取img元素,获取src和图片加载的部分...
标签: Web开发
今天有人问我,163邮箱那样的Javascript加载进度条是如何实现的。 我不知道,不过实现一个不难,因为script /有onload和onreadystatechange。还有就是,我们有Atlas。 Atlas中有个类:Sys.ScriptLoader,它的作用就是在页面中依次地加载多个Script文件。在实现之前,先来分析一下这个类的代码。     1Sys.Sc...
以前一直以为用API函数只能调用系统的那个复制的对话框来显示进度,原来还有其他方法可以用,不过这个API只能在NT4.0及以上的版本上面才有。 在工程里添加一个模块,将以下代码复制到模块里 Private Const PROGRESS_CANCEL = 1 Private Const PROGRESS_CONTINUE = 0 Private Const PROGRESS_QUIET = 3 Private Const PROGRESS_STOP = ...

经验教程

258

收藏

13
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部