图片加载进度实时显示

本文介绍了一种使用JavaScript实现的图片懒加载技术,该技术能够提高网页加载速度并优化用户体验。通过预加载图片并在滚动到视口时显示,有效减少了初始页面加载时间。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<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>
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值