图片加载进度实时显示
<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;i<sum;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";
}
</script>
<body>
<div id="aa">0%</div>
<script>
sum=l=imgs.length;
for (var i=0;i<l;i++){
imgs[i].onload=chk;
imgs[i].onerror=chk;//无论图片是否加载成功，都执行指定方法
}
</script>
</body>
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
相关文章
这篇文章主要介绍了如何在JavaScript中使用for循环,通过使用JavaScript for...in循环，我们可以循环对象的键或属性，在迭代对象属性或进行调试时，它可能很有用，但在迭代数组或对对象进行修改时，应该避免使用for...in循环，需要的朋友可以参考下2022-11-11
layui checkbox默认选中,获取选中值,清空所有选中项的例子
今天小编就为大家分享一篇layui checkbox默认选中,获取选中值,清空所有选中项的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
缩略图在网站中最常用的就是产品列表页面，一行显示几张图片，有的在图片底下带有标题、描述内容、按钮等信息。本文给大家介绍Bootstrap缩略图组件与警示框组件，感兴趣的朋友一起学习吧2016-04-04
本文主要介绍了原生js实现可拖拽效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了mpvue实现小程序签到金币掉落动画,这里使用小程序自带的api来实现，文中通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2019-10-10
关闭页面window.location事件未执行的原因及解决方法
这篇文章主要介绍了关闭页面window.location事件未执行的原因及解决方法,需要的朋友可以参考下2014-09-09
JavaScript中的location、history、navigator对象实例介绍
这篇文章主要介绍了JavaScript中的location、history、navigator对象实例介绍,需要的朋友可以参考下2023-05-05
this对于一些有经验的JavaScript开发者来说是一种非常复杂的机制。并且很多开发者对于this的理解并不是很清晰，导致在面试的时候经常受挫。今天我们就来看一看这个this真的有那么难吗2023-02-02
jsMind是一个显示/编辑思维导图的纯的javascript类库,其基于HTML5的帆布进行设计.jsMind以BSD协议开源,这篇文章主要给大家介绍了关于思维导图插件jsMind的详细使用指南,需要的朋友可以参考下2024-07-07
本篇文章主要对javascript获取url信息的常见方法进行介绍，具有很好的参考价值，需要的朋友一起来看下吧2016-12-12
最新评论