`
jarod2008
  • 浏览: 81887 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

图片加载进度实时显示

HTML 
阅读更多

【转自】http://www.jscode.cn/JsHtml/Js710.htm

 

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效代码|JsCode.CN|---图片加载进度实时显示</title>
<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[0].src="images/royale.jpg";
imgs[1].src="images/c0407.jpg";
imgs[2].src="images/royale.jpg";
imgs[3].src="images/c0407.jpg";
imgs[4].src="images/royale.jpg";
imgs[5].src="images/c0407.jpg";
}

</script>
</head>

<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>

</html>

分享到：
| javascript Functions
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    图片加载进度例子

    在IT行业中，图片加载进度的例子是一个常见的需求，特别是在开发用户界面丰富的移动应用或者网页时。这个例子主要关注如何在加载大图或者多图时显示实时的加载进度，提高用户体验。通常，图片加载涉及到网络请求、...

    glide加载图片有进度显示

    以下是一些关于如何在Glide中实现图片加载进度显示的知识点： 1. **自定义Target**： - Glide允许我们创建自定义的`Target`类，这个类可以覆盖`onLoadStarted()`, `onResourceReady()`, 和 `onLoadCleared()`等...

    glide加载图片，显示进度信息

    要显示加载进度，Glide提供了`ProgressRequestListener`接口，我们可以实现这个接口来监听图片加载的进度。以下是一个简单的示例： ```java Glide.with(context) .load(imageUrl) .listener(new RequestListener...

    silverlight 图片加载进度实例

    在本文中，我们将深入探讨Silverlight中的图片加载进度实例，这是一种强大的技术，允许开发者为用户提供更流畅、更具反馈的用户体验。Silverlight是Microsoft推出的一种基于.NET Framework的富互联网应用程序（RIA）...

    ajax图片框显示图片的加载进度Demo

    图片加载进度的实现通常涉及以下步骤： 1. **创建进度条元素**：在HTML中，我们首先需要一个进度条元素，例如一个div，用于显示加载进度。我们可以设置其初始宽度为0%，然后随着图片数据的接收逐步增加宽度。 2. *...

    『HTML5游戏开发』加载图片和显示进度条

    为了显示加载进度，我们需要监听`onprogress`事件。这个事件会在图片数据开始加载并持续更新时触发，通过`event.loaded`和`event.total`可以获取到已经加载的数据量和总数据量，从而计算出加载进度。例如： ```...

    带进度的Glide图片加载源码

    在Android开发中，Glide是一款非常流行的图片加载库，它以其高效、易用性而备受开发者喜爱。在实际应用中，我们有时需要显示图片加载的进度，比如在下载大图或者网络不佳时，用户可以直观地看到加载状态，提高用户...

    显示网页中图片加载进度的javascript脚本

    显示网页中图片加载进度的javascript脚本。 相当于网页的载入进度。 可用来创建友好的网页进入等待页面。

    As+lightbox+js加载图片进度

    在结合JavaScript（js）后，我们可以实现更丰富的功能，例如动态显示图片加载进度，提高用户交互性。 1. **什么是Lightbox** Lightbox是一种网页组件，当用户点击图片或者链接时，会在当前页面上弹出一个覆盖层，...

    IOS网络加载图片浏览能够显示进度完成后放大

    下载完成后按原图比例动画显示图片, 当从不同的图片点击从该图片的位置放大到大图动画, 同样点击大图后会缩小到该小图的位置, 当然目前还有要优化的, 浏览时的索引这个也好加, 另外就是横竖屏的支持,

    As+lightbox+js实现实时加载图片进度.rar

    综合以上，这个项目展示了如何利用ActionScript、JavaScript和CSS技术，配合Lightbox效果，实现在网页上点击图片缩略图后，不仅弹出大图，还能实时显示图片加载进度，提升用户体验。对于网页开发者来说，理解和实现...

    jQuery+css3模拟整个网页图片加载进度效果

    当前窗口内之外的图片不加载，下拉后才依次显示，效果很棒 同时整个网页顶部带有加载进度条 使用方法： 1、首先在你的网页中引入lanrenzhijia.css样式以及jQuery库和html5代码 2、将代码部分拷贝到你需要的...

    Android-GlideImageView基于Glide封装的图片加载库可以监听加载图片时的进度

    在Android应用开发中，图片加载库是不可或缺的一部分，它们帮助开发者高效、流畅地展示网络或本地资源中的图片。其中，Glide是一个广受欢迎的图片加载库，它以其出色的性能和简洁的API设计赢得了开发者们的喜爱。...

    Android实现图片加载进度提示

    首先，实现图片加载进度提示需要重写 ImageView 的 onDraw() 方法，以控制图片的显示区域。通过使用 Canvas 的 clipRect() 方法，可以实现图片逐渐增加的效果。 在实现中，我们需要定义两个 Drawable 对象，bg...

    JS+AS实现真正页面加载图片进度条(带百分比)

    "JS+AS实现真正页面加载图片进度条(带百分比)"是一个技术主题，它涉及到JavaScript（JS）和ActionScript（AS）两种编程语言的结合，用于创建一个实时显示图片加载进度的动态效果，同时显示加载的百分比。 ...

    Android 自定义图片加载进度条

    Android原生系统并未提供专门用于图片加载进度显示的控件，但我们可以利用ImageView、ProgressBar和自定义View等组件来实现这一功能。通常，图片加载过程中，我们会用到网络库（如Picasso、Glide或Volley）来获取和...

    jQuery+css3模拟整个网页图片加载进度效果.zip

    其中，图片加载进度显示就是一种提升用户体验的有效手段。本教程将通过分析“jQuery+css3模拟整个网页图片加载进度效果”的项目，深入探讨如何实现这一功能。 首先，我们来看项目的核心技术——jQuery和CSS3。...

    Android-一行代码即可监听App中所有网络链接的上传以及下载进度包括Glide的图片加载进度.

    标题提到的"Android-一行代码即可监听App中所有网络链接的上传以及下载进度包括Glide的图片加载进度"，这是一个高效且简便的方法来追踪网络流量和图片加载情况。这通常涉及到网络请求库的使用，如OkHttp，以及图片...

    Android基于Glide v4.x的图片加载进度监听

    然而，Glide的默认功能并不包括对图片加载进度的监听，这对于某些需要实时反馈图片加载状态的场景（比如显示进度条）来说是一个挑战。在Glide v4.x版本之后，由于API的变化，实现进度监听变得更加复杂，因为`using()...

    缩略图支持加载进度效果的banner焦点图

    - **进度条更新**：当图片开始加载时，启动加载进度条，根据图片加载进度实时更新其宽度。 5. **优化与扩展**： - **响应式设计**：为了适应不同设备和屏幕尺寸，焦点图应具备响应式设计，确保在手机、平板和桌面...

Magicbox
Global site tag (gtag.js) - Google Analytics