图片加载进度实时显示

2016-02-19 12:36 90 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";
}

(本文来源于图老师网站,更多请访问https://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

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



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

延伸阅读
标签: ASP
  用过软件的朋友都知道,进度条是一个优秀软件的重要组成部分。 它的存在能够使用户及时掌握程序的运行进度,确认应用程序正常工作。可是ASP中似乎没有上述标准控件,控制起来也比较麻烦。 那幺如何实现进度条呢? 以下是本人的一些观点(仅供参考)   我们通常在用ASP处理程序(指的是写文件或操作数据库)的时候,会专门用一个页面(*...
标签: Web开发
之前在做一个图片浏览效果时,要看后面的小图必须等到前面的加载完,而且大图的位置是在大量的小图后面,导致大图要等到小图都加载完才能显示,为了解决这个问题,就想到了Lazyload效果。 现在很多网站都用了类似的效果,如淘宝、Bing等。 这个图片延迟加载效果是在Lazyload的基础上扩展的,主要扩展了获取img元素,获取src和图片加载的部分...
互联网越来越快,但网页加载时的等待必不可少。据调查,用户能够忍受的最长等待时间大约在6~8秒之间。不过,有趣而富有创意的进度条可以吸引用户,让他们耐心等待。来看看本文收集的30个设计感十足的加载进度条。 Loading by pearlsomani Flat Loading Bars + Icons FREEBIE by Joe Taylor Progress Bar for Aviasales app by Mark M...
标签: Web开发
今天有人问我,163邮箱那样的Javascript加载进度条是如何实现的。 我不知道,不过实现一个不难,因为script /有onload和onreadystatechange。还有就是,我们有Atlas。 Atlas中有个类:Sys.ScriptLoader,它的作用就是在页面中依次地加载多个Script文件。在实现之前,先来分析一下这个类的代码。     1Sys.Sc...
在应用开发中,经常用到ListView去加载数据,加载图片和文字是比较常见的,文字还好,图片从网络请求加载速度比较慢,所以需要把图片的加载放到另一个线程中去执行,执行完了再更新UI线程。以下列出一个我在项目中使用到的异步加载图片的解决方案,代码没有上全,给出核心部分。 大致思路是这样 : 1.利用软引用来缓存图片Bitmap,用图片的UR...

经验教程

769

收藏

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