javascript实现在图片读取的时候出现进度条….

<title>JS实现的图片加载进度条_网页代码站(http://www.frontopen.com</title>
<script>
var l=0;
var imgs;
var sum=0;
function chk(){
document.getElementById(“aa”).innerText=””+((sum-l)*100/sum)+”%”
l–;
if (l==0){
for (var i=0;i<imgs.length;i++){
imgs[i].style.display=”;
}
}
}
</script>
<body>
<img src=”/images/wall1.jpg”/>
<img src=”/images/wall2.jpg”/>
<div id=”aa”></div>
<script>
imgs=document.getElementsByTagName(“img”);
sum=l=imgs.length;
for (var i=0;i<l;i++){
imgs[i].onload=chk;
imgs[i].onerror=chk;//无论图片是否加载成功,都执行指定方法
imgs[i].style.display=’none‘;
}
</script>
<br />
<p><a href=”ww.frontopen.com”>网页前端代码站.前端开拓者</a></p>
</body>
时间: 2024-10-04 10:41:37

javascript实现在图片读取的时候出现进度条….的相关文章

【Android】读取sdcard卡上的全部图片而且显示,读取的过程有进度条显示

尽管以下的app还没有做到快图浏览.ES文件浏览器的水平,遇到大sdcard还是会存在读取过久.内存溢出等问题,可是基本思想是这种. 例如以下图.在sdcard卡上有4张图片, 打开app,则会吧sd卡上的全部图片读取,并显示出来.读取的过程有进度条显示. 制作步骤例如以下: 1.首先,res\values\strings.xml对字符设置例如以下,没有什么特别的. <? xml version="1.0" encoding="utf-8"?> <

【Android】读取sdcard卡上的所有图片并且显示,读取的过程有进度条显示

虽然下面的app还没有做到快图浏览.ES文件浏览器的水平,遇到大sdcard还是会存在读取过久.内存溢出等问题,但是基本思想是这样的. 如下图,在sdcard卡上有4张图片, 打开app,则会吧sd卡上的所有图片读取,并显示出来,读取的过程有进度条显示. 制作过程如下: 1.首先,res\values\strings.xml对字符设置如下,没有什么特别的. <?xml version="1.0" encoding="utf-8"?> <resour

【笔记】canvas图片预加载及进度条的实现

/*star *loading模块 *实现图片的预加载,并显示进度条 *参数:图片数组对象,加载完成的回调函数 */ function loadImages(sources,callback){ var loadedImages = 0; var numImages = 0; ctx.font='14px bold'; ctx.lineWidth=5; var clearWidth=canvas.width; var clearHeight=canvas.height; // get num o

使用AsyncTask后台下载图片并在UI更新进度条和现实图片

UI上的设定就不贴了,下面是fragment相应类的,基本上可以直接用到Activity上去(受权威指南影响,现在强烈喜爱Fragment) 1 public class DownloadFragment extends Fragment { 2 3 Button mFetchButton; 4 ProgressBar mProgressBar; 5 EditText mURLEditText; 6 ImageView mImageView; 7 8 @Override 9 public Vie

【Android】内存卡图片读取器,图库app

上一篇<[Android]读取sdcard卡上的全部图片而且显示,读取的过程有进度条显示>(点击打开链接)在真机上測试非常有问题.常常遇到内存溢出.卡死的情况.由于如今真机上的内存上,2G已经非常少见了,基本上都8G的样子了. 由于把读取出来的图片一次性地放到app上,而且读取的过程中,又没有正在读取到哪个文件,尽管可以在AVD安卓模拟器上完毕主要的功能,可是这个app非常不友好. 因此採用Handler.Message配合线程等安卓消息机制.完毕读取过程,而且利用GridView把读取到的图

javascript 进度条的几种方法

我们先看看最终效果: [url=169]169[/url] 第一步,基本构建基本的代码,看效果演示:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g

Javascript写入txt和读取txt文件的方法

文章主要介绍了Javascript写入txt和读取txt文件的方法,需要的朋友可以参考下1. 写入 FileSystemObject可以将文件翻译成文件流. 第一步: 例: 复制代码 代码如下: Var fso=new ActiveXObject(Scripting.FileSystemObject); 创建一个可以将文件翻译成文件流的对象. 第二步:用于创建一个textStream 对象 括号里边有三个属性 1. 文件的绝对路径 2. 文件的常数 只读=1,只写=2 ,追加=8 等权限.(Fo

JavaScript实现判断图片是否加载完成的3种方法整理

JavaScript实现判断图片是否加载完成的3种方法整理 有时候我们在前端开发工作中为了获取图片的信息,需要在图片加载完成后才可以正确的获取到图片的大小尺寸,并且执行相应的回调函数使图片产生某种显示效果.本文主要整理了几种常见的javascipt判断图片加载完成时的方法,并通过代码与实际应用相结合进行解释与说明. onload方法 通过向img标签添加onload属性,并填入相应的函数来执行后续的javascipt代码.如下代码例子中img元素默认是不显示的,通过onload判断加载完成后再将

OpenCV:基于MFC的视频播放器和图片读取器

实例工程包下载[OpenCV:基于MFC的视频播放器和图片读取器] 一.实现的功能 1.打开本地视频进行读取.播放.暂停.停止控制 2.图片打开功能分为两种:可使用"打开图片"按钮打开本地图片,或者点击comobox里面设定的图片列表选择并显示图片 二.编译环境 OS:Win8.1 x64 IDE:  Visual Studio 2013 OpenCV: 2.4.8 三.主要思路 1.视频的滑动条控制: ①主窗体的OnHScroll()响应函数负责响应slider滑动条的变化,这样就轻